블로그에 댓글 기능 추가하기 (giscus, Next.js)

·7 min read

이 글은 Next.js 16.0.7 버전을 기준으로 작성되었습니다.

블로그의 핵심 기능은 글을 작성하고 보여주는 것입니다. 그런데 글을 읽다 보면 궁금한 점이 생기거나 의견을 공유하고 싶은 경우가 생기죠.

그래서 많은 블로그가 댓글 기능을 제공하는데, 직접 구현하려면 백엔드 API, 인증 처리, 대댓글 구조 등 신경 써야 할 부분이 많아서 꽤 번거롭습니다.

이 때문에 별도의 서버 구축 없이도 쉽게 댓글을 붙일 수 있는 오픈소스 댓글 시스템이 많이 사용되는데요, 대표적으로 utterances와 giscus가 있습니다. 둘 다 GitHub를 기반으로 댓글을 관리할 수 있다는 장점이 있죠.

giscus란?

giscus는 utterances의 영감을 받아 만들어졌는데, 기존 GitHub Issue가 아닌 GitHub Discussions를 활용한다는 점이 가장 큰 차이점입니다.

utterances의 장점을 그대로 가져가면서 아래 같은 기능들도 추가로 제공하고 있습니다.

  • 대댓글 작성 가능

  • 댓글, 답글 수 확인 가능

  • 댓글 정렬 가능 (오래된 순, 새로운 순)

  • 게시물에 대한 반응

  • 다양한 테마 제공

  • 다국어 지원 (한국어 포함)

  • 지연 로딩

확장성이나 기능 측면에서 giscus를 많이 선택하는 편이더라구요. 그래서 이번 포스트에서는 giscus를 블로그에 적용하는 방법을 소개하려고 합니다.

시작하기 전에

앞서 말했듯이 giscus는 GitHub Discussions를 기반으로 동작합니다. 작성된 댓글과 답글은 모두 Discussions에 저장되는 구조죠. 따라서 먼저 몇 가지 사전 설정이 필요합니다.

저장소를 Public으로 설정

먼저 저장소를 Public으로 설정해야 합니다. Private 저장소는 방문자들이 Discussions를 볼 수 없어서 댓글이 표시되지 않거든요.

만약 블로그 저장소를 Private으로 유지하고 싶다면, 댓글 전용 Public 저장소(예: username/comments)를 따로 만들어서 사용하는 방법도 있습니다.

GitHub Discussions 활성화

Settings → General → Features에서 Discussions를 활성화해줍니다.

Discussions를 활성화하면 기본 카테고리들이 자동으로 생성됩니다.

저는 신규 카테고리를 따로 추가하지 않고 기본 카테고리를 사용하기로 했습니다. 앞으로 만들어질 댓글들은 모두 General 카테고리에 저장될 거예요.

giscus Github App 설치

이제 giscus GitHub App을 설치해볼 차례입니다.

giscus가 굳이 전체 저장소의 권한을 가질 필요는 없으니, 댓글 저장소에 대한 권한만 가지도록 설정해줍니다.

giscus 설정

앱 설치가 완료되면 giscus 페이지로 이동해서 댓글 시스템을 설정해줍니다. 먼저 언어를 한국어로 선택한 뒤, 저장소를 연결해주면 됩니다.

그 다음 페이지와 Discussion을 연결할 방법을 선택하는데, 저는 Discussion 제목이 페이지 경로를 포함 옵션을 선택했습니다.

이 방식은 게시글의 URL 경로(예: /first-post)를 기준으로 Discussion을 연결하기 때문에, 나중에 글 제목을 수정하거나 도메인이 바뀌어도 경로만 유지되면 댓글이 그대로 유지되더라구요.

그 외 원하는 기능과 테마를 선택하면 됩니다. 모든 설정을 마치면 아래와 같이 script 코드가 자동으로 생성됩니다.

블로그에 적용하기

자, 이제 블로그에 적용해보겠습니다. 먼저 @giscus/react 패키지를 설치해줍니다.

BASH
npm install @giscus/react

설치 후 댓글 컴포넌트를 만들어줍니다. 앞서 giscus 설정 페이지에서 생성된 script 내 데이터를 아래 표시된 부분에 넣어주면 됩니다.

TSX
'use client';
import Giscus from '@giscus/react';
import { useTheme } from 'next-themes';
 
export function Comments({ className }: { className?: string }) {
  const { resolvedTheme } = useTheme();
 
  return (
    <div className={className}>
      <Giscus
        repo="jonghwann/jonghwan-nextjs-blog"
        repoId="R_kgDOQHGfog"
        category="General"
        categoryId="DIC_kwDOQHGfos4Cw7z8"
        mapping="pathname"
        strict="0"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="bottom"
        theme={resolvedTheme === 'dark' ? 'dark' : 'light'}
        lang="ko"
      />
    </div>
  );
}

이제 이 컴포넌트를 상세 페이지 하단에 배치하면 끝입니다.

TSX
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const { default: Post } = await import(`@/content/${slug}.mdx`)
 
  return (
    <div>
      <Post />
      <Comments />
    </div>
  );
}

giscus가 적용된 모습

마무리

이렇게 해서 giscus를 활용한 댓글 기능 구현을 완료했습니다.

생각보다 설정이 간단하지 않나요? 백엔드 서버 없이도 GitHub Discussions만으로 댓글 시스템을 만들 수 있다는 게 정말 편하더라구요. 게다가 방문자들도 GitHub 계정만 있으면 바로 댓글을 달 수 있으니 진입 장벽도 낮은 편이고요.

물론 GitHub 계정이 필요하다는 점이 일반 사용자에겐 조금 불편할 수 있지만, 기술 블로그 특성상 대부분의 독자가 개발자일 확률이 높으니 크게 문제가 되지 않을 것 같습니다.

혹시 궁금한 점이 있거나 적용하다가 막히는 부분이 있으면 댓글로 남겨주세요.