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 profile picture

Jordan Wu

3 min·Posted 

Sunset Over Snow Covered Mountains Image.
Sunset Over Snow Covered Mountains Image.
Table of Contents

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
Create a new site
Create a new site
  1. 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.
  2. 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.
Configure Disqus
Configure Disqus
  1. 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.
Set up moderation
Set up moderation

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.

pnpmyarnnpm
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.
File ImageDiscussion.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.

Add trusted domains
Add trusted domains

About the Author

Jordan Wu profile picture
Jordan is a full stack engineer with years of experience working at startups. He enjoys learning about software development and building something people want. What makes him happy is music. He is passionate about finding music and is an aspiring DJ. He wants to create his own music and in the process of finding is own sound.
Email icon image
Stay up to date

Get notified when I publish something new, and unsubscribe at any time.