Next.js에서 Utterances 댓글 시스템 구현하기

Next.js에서 Utterances 댓글 시스템 구현하기

Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식과 깜빡임을 방지하는 방식을 각각 소개합니다.

---

1. Utterances 기본 삽입 방법

Utterances를 삽입하려면 GitHub 저장소와 Next.js 컴포넌트에 스크립트를 추가해야 합니다.

GitHub 설정

1. 댓글을 저장할 공개(Public) GitHub 저장소를 준비합니다.
2. Utterances 앱을 설치합니다.
3. 저장소에 댓글을 이슈로 관리할 수 있도록 설정합니다.

---

Utterances 컴포넌트 기본 코드

아래는 Next.js 컴포넌트에서 Utterances를 삽입하는 기본 코드입니다.

"use client";

import { useEffect, useRef } from "react";

export default function Utterances() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;

    const script = document.createElement("script");
    script.src = "https://utteranc.es/client.js";
    script.async = true;
    script.crossOrigin = "anonymous";
    script.setAttribute("repo", "your-github-username/your-repo-name");
    script.setAttribute("issue-term", "pathname");
    script.setAttribute(, );

    ref..(script);
  }, []);

   ;
}