Adding a Comment System to Next.js with giscus - Modern Next.js Blog Series #25

This article is also published at it 邦幫忙 2022 iThome Ironman Contest

This is the 25th article in the "Modern Blog 30 Days" series.

After adding a side table of contents in the previous article, we will now add another dazzling and useful feature: a comment system!

The final effect is as follows:

The code changes for this article are as follows:

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day24-table-of-contents...day25-giscus-comment

​

Adding a Comment System to Articles

After all the hard work producing numerous articles, our hope is to communicate with the world and our readers, thus we need a place for readers to leave comments and feedback.

Let's add a comment system!

To implement a comment system, besides laboriously building our own database and API, there are also simpler existing services available for direct use, such as disqus-react.

Here, we choose Giscus as our commenting service.

Giscus is a Github App that binds to Github Discussions of a specified repo to serve as the comment board, supporting multiple languages and customizable styles. Readers simply need to log in with their Github account to leave comments.

​

Binding giscus to Your Github Repo

First, you need to select a Public Github repo to place comments. If you deployed your Next.js project to Vercel from a Github repo as described in Day 3 of Deploying Next.js Project to Vercel, you should already have a Github repo, which can be used to place comments.

First, you need to go to your repo's settings page and turn on the Discussions feature:

Then, enable the giscus Github App on your account by clicking the link below to activate it:

https://github.com/apps/giscus

After activation, you will see the giscus settings page as shown below. Set up Repository access, choose the repo you just activated Discussions for, and allow giscus to operate its Discussions:

This completes the binding process.

​

Verify Binding Status on the giscus Website and Obtain repo ID and category ID

Click the link below to go to the giscus website:

https://giscus.app/en

There you can verify the activation status of giscus for your repo and set up giscus themes, languages, comment box positions, etc., and generate corresponding code.

First, copy your repo name (username/repo_name) into it to verify that giscus binding is completed.

Then, choose which category of Github Discussions to store comments in. We follow giscus's suggestion and choose "Announcements":

Scroll down, and you will see the code block.

Please copy the data-repo-id and data-category-id from here; we will use them in Next.js:

​

Install @giscus/react in Next.js and Add Comment Block

Install @giscus/react:

Copied!
pnpm add @giscus/react

Add src/configs/giscusConfigs.ts, filling in the bound repo name, and the copied repoId, categoryId:

Copied!
export const giscusConfigs = {
  repo: "username/repo_name" as `${string}/${string}`,
  repoId: "R_xxxxxxxxxxx",
  category: "Announcements",
  categoryId: "DIC_xxxxxxxxxxxx",
};

Add src/components/Comment.tsx:

Copied!
import Giscus from "@giscus

/react";
import { useTheme } from "next-themes";

import { giscusConfigs } from "@/configs/giscusConfigs";

const Comment = () => {
  const { theme } = useTheme();

  return (
    <div id="comment" className="mx-auto max-w-prose py-6">
      <Giscus
        repo={giscusConfigs.repo}
        repoId={giscusConfigs.repoId}
        category={giscusConfigs.category}
        categoryId={giscusConfigs.categoryId}
        mapping="pathname"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="top"
        theme={theme === "dark" ? "transparent_dark" : "light"}
        loading="lazy"
      />
    </div>
  );
};

export default Comment;

Modify src/components/PostLayout.tsx to include the <Comment/> component:

Copied!
import { useRouter } from "next/router";

import Comment from "@/components/Comment";
// ...

export default function PostLayout({
  post,
  nextPost,
  prevPost,
  children,
}: Props) {
  // ...

  return (
    <article>
      <div className="divide-y divide-gray-200 transition-colors dark:divide-gray-700">
        // ...
        <div className="divide-y divide-gray-200 pb-8 transition-colors dark:divide-gray-700">
          <Comment />
          // ...
        </div>
      </div>
    </article>
  );
}

​

Results

That's it! Use pnpm dev, and when you enter an article page, you will see the comment section added at the bottom.

Log in with your Github account to leave comments and send emojis.

The final effect is as follows:

Going to the Discussions page of your bound Github repo, you will also see that comments are actually stored in Discussions:

You will receive emails to your Github email inbox for any reader comments, so you won't miss any feedback.

The code changes for this article are as follows:

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day24-table-of-contents...day25-giscus-comment

​

References

• giscus/giscus: A comment system powered by GitHub Discussions.
• giscus homepage

​

Next Article

Congratulations on successfully adding a comment system, giving you the opportunity to interact with your readers!

In the next article, we will continue to add more dazzling and useful features: "Command Palette"!