Published on

How to Add Discussions to Your Next.js Application

  • avatar
    Rosa Tiara

What is Github Discussions?

GitHub Discussions is a collaborative communication forum for the Github community around an open source or internal project. With this forum, Github members can ask and answer questions, share updates, or even just having conversations about a project.


Project Initialization

  1. Go to Github, then sign up or login.
  2. Make your target repository as public.

Set Up Your First Discussion

  1. In your repository, click Settings.
repository settings
  1. CTRL+F or scroll down to find Discussions.
  2. Check the box.
discussions box checked
  1. Click the Set up discussions button.
  2. In this part, you can start a new discussion. Github has provided a template that is pretty straightforward to start with this.
  3. When you're good to go, Click Start discussion.

Enable giscus to Your Project

  1. Head to and click Configure.
  2. Scroll down to Repository access and modify it based on your preference, and click Save.

Get the API Key of Your Project

Github uses GraphQL API to fetch your account's data. You can explore many things using that data with this API.

  1. Head to
  2. Sign in with your Github account.
  3. Copy and paste this API request to the leftside of GraphiQL and don't forget to change the content inside the <> tag.
query {
  repository(owner: "<your_github_username>", name:"<your_repository>"){
    discussionCategories(first:10) {
      edges {
        node {

Explanation: the query above requests the first 10 discussions of owner in a repository called name.

  1. Click this button.
a button to fetch the API request

You'll see a schema result like this:

  "data": {
    "repository": {
      "id": "R_kgDOHucLSQ",
      "discussionCategories": {
        "edges": [
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwZ",
              "name": "Announcements"
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwa",
              "name": "General"
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwc",
              "name": "Ideas"
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwe",
              "name": "Polls"
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwb",
              "name": "Q&A"
            "node": {
              "id": "DIC_kwDOHucLSc4CQdwd",
              "name": "Show and tell"

Explanation: The repo with ID R_kgDOHucLSQ has 6 discussion category nodes. Each of them represents your discussion's category (Announcements, General, Ideas, Polls, Q&A, Show and tell) and its corresponding ID.

Install @giscus/react Package to Your Project

  1. Open terminal, copy, and paste the following command.

For npm:

npm install @giscus/react

Or, for yarn:

yarn add @giscus/react
  1. Implement giscus
import {Giscus} from "@giscus/react"

export default function GiscusComment() {
  return (

Psst.. don't forget to import the package! :p


  • repo: your target repository
  • repoId: the ID of your repo, located at the in the schema above.
  • category: discussion's category. Choose what you like!
  • categoryId: ID of the category that you chose, located at
  • reactionsEnabled: 1 for enabling reactions, and 0 for disabling reactions.
  • emitMetadata: 1 for enabling experimental support for emitting type metadata, and 0 for disabling it.
  • theme: choose your favorite theme!
  • lang: language preference
  • loading: kind of loading you want to implement for your giscus.

Voila! 🎉 You now have a discussion feature in your project!