Does Giscus work with Next.js APP Router?

[atapas]

I am using Next.js App Router(v.15) with "@giscus/react" version 3.1.0. I am getting this error:

Here is my code

"use client";

import Giscus from "@giscus/react";

const projectRepo = process.env.NEXT_PUBLIC_GISCUS_PROJECT_REPO;
const projectRepoId = process.env.NEXT_PUBLIC_GISCUS_PROJECT_REPO_ID;
const discussionCategoryId =
    process.env.NEXT_PUBLIC_GISCUS_DISCUSSION_CATEGORY_ID;
const discussionCategoryName =
    process.env.NEXT_PUBLIC_GISCUS_DISCUSSION_CATEGORY_NAME;

console.log(
    projectRepo,
    projectRepoId,
    discussionCategoryId,
    discussionCategoryName
);

const CommentSystem = () => {
    return (
        <>
            <Giscus
                id="comment-id"
                repo={projectRepo}
                repoId={projectRepoId}
                category={discussionCategoryName}
                categoryId={discussionCategoryId}
                mapping="pathname"
                reactionsEnabled="0"
                emitMetadata="0"
                inputPosition="top"
                theme="light"
                lang="en"
                loading="lazy"
            />
        </>
    );
};

export default CommentSystem;

I have configured Giscus correctly with the repo, and supplied the correct value for the

• projectRepo,
• projectRepoId
• discussionCategoryId
• discussionCategoryName

Thanks for your help.

[oldregime]

Yes! Giscus works great with Next.js App Router. Here's how to set it up:

Using the @giscus/react component:

1. Install the package:

npm install @giscus/react

2. Create a client component (important for App Router!):

// components/Comments.tsx
'use client';

import Giscus from '@giscus/react';

export default function Comments() {
  return (
    <Giscus
      repo="your-username/your-repo"
      repoId="your-repo-id"
      category="Announcements"
      categoryId="your-category-id"
      mapping="pathname"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="preferred_color_scheme"
      lang="en"
      loading="lazy"
    />
  );
}

3. Use it in your page:

// app/blog/[slug]/page.tsx
import Comments from '@/components/Comments';

export default function BlogPost() {
  return (
    <article>
      {/* Your content */}
      <Comments />
    </article>
  );
}

Key points for App Router:

• Must use 'use client' directive since Giscus requires browser APIs
• Get your config values from https://giscus.app
• Works with both static and dynamic routes

The component handles all the iframe communication automatically. Hope this helps!