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

개요

Next.js 블로그에 댓글 기능을 추가합니다.

GitHub을 이용한 댓글 기능은 utterances와 giscus가 있습니다.

utterances는 GitHub Issue를 댓글로 사용하는 방식이고,
giscus는 GitHub Discussion을 댓글로 사용하는 방식입니다.

giscus로 결정한 이유는

댓글과 별도로 반응 이모지를 사용할 수 있습니다.
댓글에 답글을 달 수 있습니다.

그 외의 부분은 아래 글을 참고해주세요.
Moving from utterances to giscus

전제

Tailwind CSS Blog Starter 템플릿 코드로 프로젝트를 시작하였으며, 여기에는 이미 giscus 관련 script 코드가 구현되어있습니다.
그렇기 때문에 설정 정보들만 변경해주었습니다.
giscus 는 댓글 입력하는 사람이 GitHub 로그인 및 최초 입력 시 권한 인증이 필요합니다. (utterances도 마찬가지 입니다.)

giscus 설치 정보 보기

giscus

giscus 설정

1. giscus와 연결할 댓글용 repository 생성

❗ 공개(Public) ❗ repository 로 생성해야합니다.

2. 위에서 생성한 댓글용 repository에 giscus 설치

giscus Install 접속
Install 버튼 클릭
Only select repositories 선택 > 위에서 생성한 댓글용 repository 선택 > Install 버튼 클릭

3. Discussions 활성화

댓글용 repository > Settings > General
Features > Discussions: 체크박스 선택

4. giscus 설정 확인

giscus 페이지 접속
설정 부분 확인
- 사용할 언어 지정
- 저장소: 입력 박스에 본인의 댓글용 repository를 입력합니다. (ex: 'hlog-kr/for-comment-giscus')
  - 저장소를 입력하면 아래에 사용 가능 여부를 확인할 수 있습니다.
- 페이지 Discussions 연결
  - pathname (Discussion 제목이 페이지 경로를 포함)
    (blog/2023-07/add-next-js-giscus 와 연결됩니다. )
  - url (Discussion 제목이 페이지 URL을 포함)
    (https://hlog.kr/blog/2023-07/add-next-js-giscus 와 연결됩니다. )
  - title (Discussion 제목이 페이지 title을 포함)
    (Next.js 블로그에 댓글(giscus) 추가하기 와 연결됩니다. )
  - 그 외 부분은 giscus 페이지에서 확인해주세요.
- Discussion 카테고리 선택 (저는 그냥 General로 선택했습니다.)
- 테마를 선택합니다. (light, dark 두개를 선택했습니다.)

url의 경우, 도메인이 변경되면 댓글이 연결되지 않게 되고,
title의 경우 title이 변경되면 댓글이 연결되지 않게 됩니다.
그런 이유로, 저는 pathname을 사용하였습니다.

giscus 사용에 표시된 정보(script)를 다음 단계에서 입력합니다.

코드에 giscus 적용

이 프로젝트는 Tailwind CSS Blog Starter 템플릿 코드로 프로젝트를 시작하였으며, 여기에는 이미 giscus 코드가 구현되어있습니다.
그렇기 때문에 설정 정보들만 변경해주었습니다.

1. giscus 설정 정보 입력

data/siteMetadata.js 파일을 엽니다.
comment > provider 는 giscus로 설정합니다.
comment > giscusConfig 부분의 각 설정을 본인의 정보로 변경합니다.

.env 파일을 생성해서 본인의 설정을 입력해도 되고,

NEXT_PUBLIC_GISCUS_REPO=xxxxxxx/xxxxxxx
NEXT_PUBLIC_GISCUS_REPOSITORY_ID=R_xxxxxxxxx
NEXT_PUBLIC_GISCUS_CATEGORY=xxxxxxxxx
NEXT_PUBLIC_GISCUS_CATEGORY_ID=DIC_xxxxxxxxx

data/siteMetadata.js 파일에 직접 입력해도 됩니다.

const siteMetadata = {
  comment: {
    provider: 'giscus', // <--
    giscusConfig: {
      repo: 'your_repo', //process.env.NEXT_PUBLIC_GISCUS_REPO,
      repositoryId: 'your_repositoryId', //process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
      category: 'General', //process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
      categoryId: 'your_categoryId', //process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
      mapping: 'pathname', // supported options: pathname, url, title
      // ...
      theme: 'light',
      inputPosition: 'top', //'bottom',
      // ...
      darkTheme: 'dark', //'transparent_dark',
      // ...
    },
    // ...
  },
}

module.exports = siteMetadata

giscus 다국어 사용시 문제

저의 블로그는 다국어를 지원합니다.

아래와 같은 URL로 접근했을 때 댓글이 무조건 en 으로 연결되는 문제가 있었습니다.

/blog/2023-07/add-next-js-giscus
/en/blog/2023-07/add-next-js-giscus

검색 결과, 기본적으로 giscus는 부분 일치만으로 댓글이 연결됩니다. giscus 호출 스크립트에 data-strict="1"(엄격한 제목 일치 사용)을 추가하면 됩니다.

자세한 내용은 https://github.com/giscus/giscus/issues/508 를 참고해주세요.

components/comments/Giscus.js

// ...

const Giscus = () => {
    // ...

    const script = document.createElement('script')
    script.src = 'https://giscus.app/client.js'
    // ...
    // 엄격한 제목 일치 사용
    script.setAttribute('data-strict', '1')
    script.async = true

    // ...
  }, [commentsTheme])

  // ...
}

export default Giscus

댓글 창 크기 문제

댓글이 화면 너비에 맞지 않고 작게 표시되는 문제가 있었습니다.

개발 도구에서 확인해보니 default.css를 cross-origin으로 불러오지 못하는 문제가 있었습니다.

Content Security Policy를 업데이트 해줍니다. (style-src에 giscus.app을 추가)

next.config.js

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app *.googletagmanager.com;
  style-src 'self' 'unsafe-inline' giscus.app;
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app
`

댓글 확인

아래 댓글로 확인해주세요.

코드

변경된 코드는 commit history 를 참고해주세요.

(위 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.)

개요

전제