[Next.js] 나만의 학습 블로그 만들기#4 - 댓글 기능(Feat. Giscus)

댓글기능이 있으면 무조건 재밌을 거 같아서 넣어보려고 한다🤭

아무래도 개발에 관련된 학습 블로그라서 개발자들이 많을 것으로 예상했다 !

그래서 깃허브 이슈 기반 댓글 시스템을 기반으로 기능을 구현해보려고 한다.

👉🏻 도움이 많이 된 블로그 !

방법

• Giscus | (https://giscus.app)

• utterances | (https://utteranc.es)

알아봤을 때는 이렇게 두 개가 유명하다고 한다.

그럼 각각의 특징과 장단점을 알아보자

1. Giscus

특징

• GitHub Discussions와 Issues 모두 지원

• 다국어 지원 및 라이트/다크 모드 자동 감지 기능 탑재

• 더 풍부한 커스터마이징 옵션 제공

• 공식 웹사이트에서 설정 도구 제공으로 세팅이 편리함

• React 컴포넌트로도 쉽게 설치 가능

장점

• GitHub Discussions 지원해줘서 더 깔끔한 댓글 관리 가능

• 라이트/다크 모드 자동 감지 및 테마 변경 기능 탑재

• 다양한 설정 옵션으로 사용성 개선 가능

• 깃허브의 공식 API를 이용해 안정적이고 빠름

• 커뮤니티에서 적극적으로 유지보수 중

단점

• Issues뿐 아니라 Discussions 활성화가 필요하므로 깃허브 리포지토리 관리가 조금 더 필요하다

• 처음 설정이 약간 까다로울 수 있다

• GitHub Discussions 활성화가 불가능한 공개 저장소나 일부 환경에서는 제한적일 수 있다

---

2. utterances

특징

• GitHub Issues 댓글을 댓글 시스템으로 활용

• 가볍고 설정이 간단함

• 별도의 UI 커스터마이징 기능은 제한적

• 다크 모드 지원 기본 제공

• 공개 저장소뿐 아니라 프라이빗 저장소도 지원 가능

장점

• 설정 매우 간단

• 가볍고 빠름

• GitHub Issues만으로 댓글 관리가 가능하여 환경 제약 적음

• 공식 문서가 직관적이며 바로 적용 가능

단점

• GitHub Discussions 지원 안 함

• 커스터마이징 옵션이 상대적으로 적음

• UI가 다소 단순하고 변경할 수 있는 폭이 적음

• 다국어 지원이 없거나 제한적임

---

그래서 각각 어떨 때 사용하면 좋은건데?!

• 좀 더 다양한 기능과 깔끔한 UI 그리고 다국어 지원이 필요하고 Discussions를 활용할 수 있으면 → Giscus

• 간단하고 빠르게 GitHub Issues 댓글 시스템만 연동하고 싶고 Discussions는 필요 없으면 → utterances

나는 당연히 Giscus를 선택했다

선택한 이유✍🏻

• 일단 나는 다국어 지원 기능을 넣을 예정이라서(next-i18next) Giscus가 훨씬 시너지 효과가 크고 유지보수도 편하지 않을까…?라는 생각을 했다. 초기 설정은 약간 귀찮을 수 있지만 한 번 세팅해두면 다국어도 자연스럽게 지원되고 사용자 경험도 훨씬 좋아질거라구 믿습니다..! 제발! 🤧

🌱 설정

1. Repository > Settings > Features > Discussions 활성화

2. giscus 웹사이트 들어가줍니당 ~

   

앱이 설치된 걸 확인할 수 있다 !

이제 저장소에 내 깃허브닉네임/레포이름을 입력해주면 조건이 만족한다고 뜬다😊

그리고 깃허브 레포에 가서 새로운 댓글 카테고리를 만들어줬다.

사용하지 않는 카테고리는 정리해줬다!!(이건 필수는 아님)

다시 사이트로 돌아와서 Comments를 선택해줬다.

나머지 옵션들을 선택해주면 <script>가 뜨는걸 확인할 수 있다.!

이제 삽입해주자 ~

설치

// @giscus/react 설치

npm install @giscus/react

<comments>컴포넌트를 만들어줬습니다.

import Giscus from "@giscus/react";

export default function Comments() {
  return (
    <Giscus
      repo="subinsong01/Coderhythm"
      repoId="R_kgDOPGJxzw"
      category="Comments"
      categoryId="DIC_kwDOPGJxz84Cs66K"
      mapping="pathname"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="bottom"
      theme="preferred_color_scheme"
      lang="ko"
      loading="lazy"
    />
  );
}

나는 메인페이지에만 방문 댓글을 기능을 넣어주고 싶어서

<index.js>

import Comments from "@/components/Comments";
export default function Home() {

  return (
    <div className="w-full px-2">
      <Comments />
    </div>
  );

메인페이지에만 넣어줬다.

기능 완료 ! 👍🏻❤️

🌱 댓글 기능 구현하면서 느낀 점

처음에는 댓글 기능을 직접 구현할까 고민했지만 Giscus를 써보니 정말 간편하고 GitHub 기반이라 관리도 쉬웠다. 특히 블로그가 개발자 대상이라면 Giscus가 잘 어울린다고 느낌?!

처음에는 설정하는데 까다로울까 하고 걱정했지만 그렇게 복잡하지 않아서 꼭 개인 블로그에 적용해보길 강추한다,,✨