Nextra Giscus Comments Integration

bun add @giscus/react

'use client'
 
import Giscus from '@giscus/react'
import { useTheme } from 'next-themes'
 
interface GiscusCommentsProps {
  lang: string
}
 
export function GiscusComments({ lang }: GiscusCommentsProps) {
  const { resolvedTheme } = useTheme()
 
  return (
    <div className="mt-8">
      <Giscus
        id="comments"
        repo="your-username/your-repo"
        repoId="YOUR_REPO_ID"
        category="General"
        categoryId="YOUR_CATEGORY_ID"
        mapping="og:title"
        strict="0"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="bottom"
        theme={resolvedTheme === 'dark' ? 'dark' : 'light'}
        lang={lang === 'zh' ? 'zh-CN' : 'en'}
        loading="lazy"
      />
    </div>
  )
}

import { generateStaticParamsFor, importPage } from 'nextra/pages'
import { useMDXComponents } from '@/mdx-components'
import { GiscusComments } from '@/components/GiscusComments'
 
export const generateStaticParams = generateStaticParamsFor('mdxPath')
 
export async function generateMetadata(props: PageProps) {
  const params = await props.params
  const { metadata } = await importPage(params.mdxPath, params.lang)
  return metadata
}
 
type PageProps = Readonly<{
  params: Promise<{
    mdxPath: string[]
    lang: string
  }>
}>
 
const Wrapper = useMDXComponents().wrapper
 
export default async function Page(props: PageProps) {
  const params = await props.params
  const result = await importPage(params.mdxPath, params.lang)
  const { default: MDXContent, toc, metadata, sourceCode } = result
 
  const isDocsPage = params.mdxPath && params.mdxPath.length > 0
 
  return (
    <Wrapper
      toc={toc}
      metadata={metadata}
      sourceCode={sourceCode}
      bottomContent={isDocsPage ? <GiscusComments lang={params.lang} /> : undefined}
    >
      <MDXContent {...props} params={params} />
    </Wrapper>
  )
}