How to Add Disqus to Your Next.js App

Disqus is a feature-rich comment platform used by many websites. It's easy to install on many platforms ranging from the most popular content management systems (CMS) like Wordpress to custom websites using Next.js. It's the perfect solution if you want to allow users to comment on your website. In this blog we will learn how to add Disqus to your Next.js App Router app.

Jordan Wu

3 min·Posted Mar 27, 2024

What is Disqus?

Disqus is a commenting platform used by websites and online communities to facilitate discussion and engagement. It allows users to comment on articles, blog posts, and other content. Disqus offers features such as threaded discussions, voting, moderation tools, user profiles, and social media integration. The best part is you have full control on how to moderate the comments on your website. In today's digital age, fostering meaningful conversation and interactions with your users is crucial for creating a great brand.

How to Create Disqus Site

1. Create a Disqus Account
2. Create a new site

3. Select a Disqus plan, Choose the free Basic plan. It includes many core features: the comments plug-in, advanced spam filtering, moderation tools, basic analytics, configurable ads and more.
4. Select Platform, Choose "I don't see my platform listed, install manually with Universal Code". We don't be using the code snippet but remember the shortname that you used. Go to next step by clicking Configure at the bottom of the page.

5. Set up moderation. Select the default settings profile that best fits your moderation style and community. Again, you can update these settings at any time. Choose from Balanced or Strict profile settings.

How to Add Disqus to Next.js App Router

Now that you have your Disqus site created. The next step is to install a library called disqus-react. This dependency contains all the code you need to use Disqus in your Next.js app.

pnpm add disqus-react

Once installed you can now add Disqus discussion to your Next.js app. This is easy with DiscussionEmbed component that requires the following properties to work.

• shortname that you entered during the create Disqus site step. If you don't remember you can find your shortname in the settings General page.
• title is the title of your content for the discussion.
• identifier is a unique identifier for the discussion.
• url is the URL of your webpage that you want to add a discussion on.

Discussion.tsx

'use client'
import { DiscussionEmbed } from 'disqus-react'

import type { Post } from 'contentlayer/generated'

type DiscussionProps = {
  post: Post
}

export default function Discussion(props: DiscussionProps) {
  const { post } = props

  return (
    <DiscussionEmbed
      shortname="example"
      config={{
        url: props.article.url,
        identifier: props.article.id,
        title: props.article.title,
      }}
    />
  )
}

That's all you need to add Disqus discussion to your Next.js app. You can add the Discussion component anywhere on your website and it will use the same theme as your website. What's great is it's responsive and works on all screen sizes like mobile and desktop.

Add Trusted Domains

The code snippet allows us to easily add Disqus discussion on your website, but what stops other people from using your discussion with the same shortname? To stop other users from using your discussion. You would need to add all the domains that are allowed to use the discussion inside of your site's Settings and Advanced page. There you can add all your Trusted Domains.