Integrating Disqus in your Next.js React Application

Disqus is a networked community platform used by hundreds of thousands of sites all over the web. With Disqus, your website gains a feature-rich comment system complete with social network integration, advanced administration and moderation options, and other extensive community functions

In this blog we will learn how to add discuss to your Next.js React application.

Create an account on Disqus

Create an account on disqus.com

Install discuss by going on https://disqus.com/features/engage/
Choose I want to install Disqus on my site ( second open )

Add a shortname for the site and select the category.

Finish the rest of the settings.

Install Disqus

The good news is that Disqus officially has a npm package to use with React applications.

Let’s install disqus on your react application.

npm install disqus-react

Create a React Component for Comments

Now create a React component and add these

import {DiscussionEmbed} from "disqus-react"

const DisqusComments = ({ post }) => {
  const disqusShortname = "your-disqus-shortname"

  const disqusConfig = {
    url: "https://your-site-url/post-slug",
    identifier: post.id, // Single post id
    title: post.title // Single post title
  }

  return (
    <div>
      <DiscussionEmbed
        shortname={disqusShortname}
        config={disqusConfig}
      />
    </div>
  )
}

export default DisqusComments;

Now you can import this Component on the single post page and this is how it would look like on that page.

That’s all folks!