Giscus로 블로그 댓글 기능 구현하기

블로그 게시글 페이지
→ Giscus가 현재 페이지 경로 확인
→ 해당 경로와 연결된 GitHub Discussion 탐색 또는 생성
→ 댓글 작성
→ 댓글은 GitHub Discussions에 저장
→ 블로그에서 댓글 목록 출력

Repository → Settings → General → Features → Discussions 체크

Repository → Discussions → Categories

# npm 사용시
npm install @giscus/react
# 또는 yarn, pnpm, bun 사용 시
yarn add @giscus/react
pnpm add @giscus/react
bun add @giscus/react

<script src="https://giscus.app/client.js"
        data-repo="댓글을 사용할 저장소명(github아이디/레포지터리명)"
        data-repo-id="github 저장소 고유 ID"
        data-category="댓글이 생성될 Github Discussions 카테고리"
        data-category-id="카테고리 고유 ID"
        data-mapping="어떤 기준으로 Discussion을 연결할지 정하는 옵션"
        data-strict="Discussion을 어느정도로 엄격하게 할지 정하는 옵션(0, 1)"
        data-reactions-enabled="댓글에 Github Reaction 기능을 사용할지 정하는 옵션(좋아요, 하트 등 사용)"
        data-emit-metadata="메타데이터 이벤트를 보낼지 정하는 옵션"
        data-input-position="댓글 입력창의 위치를 정하는 옵션"
        data-theme="댓글창의 테마를 정하는 옵션"
        data-lang="언어 설정"
        crossorigin="CORS 정책과 관련된 옵션 외부 스크립트를 불러올때 사용"
        async>
</script>

'use client';

import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes';
import Giscus from '@giscus/react';

export default function Comments() {
    const { theme, resolvedTheme } = useTheme();
    const [isMounted, useState] = useState(false);

    // 하이드레이션 에러 방지를 위한 마운트 체크
    useEffect(() => {
        useState(true);
    }, []);

    if (!isMounted) {
        return <div className="mt-12 min-h-[380px]" />;
    }

    // next-themes의 테마 상태에 맞춰 Giscus 테마 동적 지정
    const currentTheme = resolvedTheme || theme || 'light';
    const giscusTheme = currentTheme === 'dark' ? 'dark_dimmed' : 'light';

    return (
        <section className="mt-12 w-full border-t border-slate-200 pt-10 dark:border-slate-800">
            <h2 className="mb-6 text-xl font-bold text-slate-950 dark:text-slate-50">💬 댓글 나누기</h2>
            <div className="min-h-[380px]">
                <Giscus
                    id="comments"
                    repo="GitHub아이디/저장소명"
                    repoId="github 저장소 고유 ID"
                    category="댓글이 생성될 Github Discussions 카테고리"
                    categoryId="카테고리 고유 ID"
                    mapping="pathname"          // 보통 현재 페이지 경로(pathname)를 기준으로 묶습니다.
                    strict="1"                  // 엄격한 일치 옵션 (0 또는 1)
                    reactionsEnabled="1"        // 리액션(좋아요, 하트 등) 활성화 (1 또는 0)
                    emitMetadata="0"            // 메타데이터 이벤트 송신 여부 (1 또는 0)
                    inputPosition="bottom"      // 댓글 입력창 위치 (top 또는 bottom)
                    theme={giscusTheme}         // 가공한 테마 값 전달
                    lang="ko"                   // 언어 설정 (한국어: ko)
                    loading="lazy"              // 지연 로딩을 통한 초기 페이지 성능 최적화
                />
            </div>
        </section>
    );
}

<Comments />