Adding Comments (giscus) to a Next.js Blog

Overview

I will add comments to the Next.js blog.

There are two options for adding comments through GitHub: utterances and giscus.

utterances uses GitHub Issues as comments, while giscus uses GitHub Discussions.

I chose giscus for the following reasons:

• It allows the use of emoji reactions alongside comments.
• It supports replies to comments.

For more details, you can refer to the following article: Moving from utterances to giscus.

Prerequisites

• I started the project using the Tailwind CSS Blog Starter template, which already includes the giscus-related script code.
• Therefore, I only had to update the configuration information.
• giscus requires users to authenticate with their GitHub accounts and authorize permissions for commenting, especially during the first comment entry. (utterances is the same.)

View giscus Installation Information

giscus

Configure giscus

1. Create a Repository for giscus Comments

You must create a ❗public❗ repository.

2. Install giscus in the Repository You Created

1. Go to giscus Install.
2. Click the Install button.
3. Choose Only select repositories
4. Select the repository you created for comments.
5. Click the Install button.

3. Activate Discussions

1. Go to the repository created for comments.
2. Navigate to Settings > General.
3. Under Features, check the Discussions checkbox.

4. Verify giscus Settings

1. Visit the giscus page.

2. Check the settings section.

   • Specify the language you want to use.

   • Repository: Enter the name of your comment repository in the input box (e.g., 'hlog-kr/for-comment-giscus').

     • After entering the repository, you can check its availability below.

   • Connect Discussions to

     • pathname (Discussion titles will include the page path)
       (Connected to blog/2023-07/add-next-js-giscus)
     • url (Discussion titles will include the page URL)
       (Connected to https://hlog.kr/blog/2023-07/add-next-js-giscus)
     • title (Discussion titles will include the page title)
       (Connected to Adding Comments (giscus) to a Next.js Blog)
     • For other options, please refer to the giscus page.

   • Choose a Discussion category (I chose General).

   • Select a theme (I chose both light and dark themes).

3. Enter the information (script) provided for giscus usage in the next step.

Apply giscus to the Code

This project started with the Tailwind CSS Blog Starter template code, and giscus code is already implemented here. Therefore, we only need to change the configuration details.

1. Enter giscus Configuration Information

1. Open the data/siteMetadata.js file.
2. Set comment > provider to giscus.
3. Modify each setting in comment > giscusConfig with your own information.

You can create an .env file and input your configuration, like this:

NEXT_PUBLIC_GISCUS_REPO=xxxxxxx/xxxxxxx
NEXT_PUBLIC_GISCUS_REPOSITORY_ID=R_xxxxxxxxx
NEXT_PUBLIC_GISCUS_CATEGORY=xxxxxxxxx
NEXT_PUBLIC_GISCUS_CATEGORY_ID=DIC_xxxxxxxxx

Alternatively, you can directly input your settings into the data/siteMetadata.js file.

const siteMetadata = {
  comment: {
    provider: 'giscus', // <--
    giscusConfig: {
      repo: 'your_repo', //process.env.NEXT_PUBLIC_GISCUS_REPO,
      repositoryId: 'your_repositoryId', //process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
      category: 'General', //process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
      categoryId: 'your_categoryId', //process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
      mapping: 'pathname', // supported options: pathname, url, title
      // ...
      theme: 'light',
      inputPosition: 'top', //'bottom',
      // ...
      darkTheme: 'dark', //'transparent_dark',
      // ...
    },
    // ...
  },
}

module.exports = siteMetadata

Issue with Multilingual Usage of Giscus

My blog supports multiple languages, and I encountered a problem where comments were always connected to the "en" (English) language when accessing specific URLs:

• /blog/2023-07/add-next-js-giscus
• /en/blog/2023-07/add-next-js-giscus

Upon investigation, I discovered that by default, Giscus connects comments based on partial title matches. To address this issue, I added data-strict="1" (enabling strict title matching) to the Giscus script.

For more detailed information, please refer to https://github.com/giscus/giscus/issues/508.

• components/comments/Giscus.js

// ...

const Giscus = () => {
    // ...

    const script = document.createElement('script')
    script.src = 'https://giscus.app/client.js'
    // ...
    // Enable strict title matching
    script.setAttribute('data-strict', '1')
    script.async = true

    // ...
  }, [commentsTheme])

  // ...
}

export default Giscus

Comment Box Size Issue

I encountered an issue where the comments were not displaying properly and appeared too small for the screen width.

Upon inspecting the issue with the browser developer tools, I found that there was a problem loading default.css due to cross-origin issues.

To address this problem, you need to update the Content Security Policy (style-src) to allow loading styles from giscus.app.

next.config.js

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app *.googletagmanager.com;
  style-src 'self' 'unsafe-inline' giscus.app;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app
`

Check the Comments

Please check the comments below.

Code

The updated code can be found in the commit history.