Add Comment Section in NextJS - GeeksforGeeks

31 Oct, 2021
In this article, we are going to learn how we can add a Comment Section in NextJs. Using the comment section users can write their thoughts and queries in your NextJs app. 
NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.
Approach: To add our Comment section we are going to use the Disqus platform. Disqus is a networked community platform used by hundreds of thousands of sites all over the web. So first, we will create an account in the Disqus platform and install the Disqus package and then we will create a new file in which we will write code for our comment section. Then on our homepage, we will import our comment section.
Create NextJS Application: You can create a new NextJs project using the below command:
npx create-next-app gfg
Install the required package: Now we will install the Disqus package using the below command:
npm install disqus-react
Project Structure: It will look like this.
Create Account in Disqus: Next we have to create a new account in Disqus. So to do this follow the below steps:
1. Go to Disqus’s Official Site and Click on Get Started. Then click on Sign Up.
2. After Signing up, Click on the ‘I want to install Disqus on my site’ Button.
3. After that, Enter your website name and choose a category.
That’s it. Now we are ready to add the Comment section in our NextJs app.
Adding Comment Section: Now to add our comment section we are going to create a new folder in our gfg directory with the name ‘components’ and inside this folder, we will create a new javascript file with the name ‘Comment.js‘.
Add the below content in our Comment.js file:
Javascript
import {DiscussionEmbed} from "disqus-react"  const Comments = () => {  const disqusShortname = "Demo-GfG"    const disqusConfig = {    url: "http://localhost:3000",    identifier:'123',     title: "Demo Post"   }    return (    <div>      <DiscussionEmbed        shortname={disqusShortname}        config={disqusConfig}      />    </div>  )}  export default Comments;
In the above code, we are first importing DiscussionEmbed from our disqus-react. After that, we are creating a new component with the name Comments and inside this component, we are storing the disqusShortname. Website URL, identifier, and title in different constant variables. Then we are returning our DiscussionEmbed function. 
Now we can import the above file to our homepage to display our comment section.
Add the below content in the index.js file:
Javascript
import React from 'react'import Comments from '../components/Comment'  export default function Text() {  return (    <div>      <h1>Comments - GeeksforGeeks</h1>      <Comments/>    </div>  )}
Now when we run our NextJs app the index.js file will act as the homepage of the app.
Steps to run the application: Run the below command in the terminal to run the app.
npm run dev
Next.js
React-Questions
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components