Add Comment Section in Next.js

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:

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:

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

Output: