# Adding a Comment System to Next.js with giscus - Modern Next.js Blog Series #25
- Canonical: https://easonchang.com/posts/giscus-comment-system
- Date: 2022-10-10T00:00:00.000Z
- Language: en
- Description: Using @giscus/react to add a comment system within a Next.js blog, binding to Github Discussions as the commenting platform
> This article is also published at [it 邦幫忙 2022 iThome Ironman Contest](https://ithelp.ithome.com.tw/articles/10306883)
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/eason-dev/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](https://github.com/disqus/disqus-react).
Here, we choose [Giscus](https://giscus.app/en) 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](/posts/nextjs-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](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](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`:
```shell
pnpm add @giscus/react
```
Add `src/configs/giscusConfigs.ts`, filling in the bound repo name, and the copied `repoId`, `categoryId`:
```ts
export const giscusConfigs = {
repo: "username/repo_name" as `${string}/${string}`,
repoId: "R_xxxxxxxxxxx",
category: "Announcements",
categoryId: "DIC_xxxxxxxxxxxx",
};
```
Add `src/components/Comment.tsx`:
```tsx
import Giscus from "@giscus
/react";
import { useTheme } from "next-themes";
import { giscusConfigs } from "@/configs/giscusConfigs";
const Comment = () => {
const { theme } = useTheme();
return (
);
};
export default Comment;
```
Modify `src/components/PostLayout.tsx` to include the `` component:
```tsx
import { useRouter } from "next/router";
import Comment from "@/components/Comment";
// ...
export default function PostLayout({
post,
nextPost,
prevPost,
children,
}: Props) {
// ...
return (
);
}
```
## 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/eason-dev/nextjs-tailwind-contentlayer-blog-starter/compare/day24-table-of-contents...day25-giscus-comment
## References
- [giscus/giscus: A comment system powered by GitHub Discussions.](https://github.com/giscus/giscus)
- [giscus homepage](https://giscus.app/en)
## 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"!