Next.js 사이트에 댓글 추가하는 방법 (App Router 및 Pages Router)

Source: Dev.to

소개

Next.js는 페이지를 렌더링하는 다양한 방법을 제공하므로, 댓글을 추가하는 접근 방식은 사용 중인 라우터에 따라 달라집니다. 아래 솔루션은 App Router와 Pages Router 모두에서 작동하도록 EchoThread 위젯을 삽입하는 방식입니다 (프라이버시 우선, 광고 없음, 도메인 추가, 생성된 키 복사).

2. 환경 변수에 키 추가

# .env.local
NEXT_PUBLIC_ECHOTHREAD_API_KEY=YOUR_API_KEY

클라이언트 측에서 접근하려면 NEXT_PUBLIC_ 접두사가 필요합니다.

3. EchoThread 컴포넌트 만들기

components/EchoThread.tsx

"use client";

import Script from "next/script";

export default function EchoThread({ theme = "auto" }: { theme?: string }) {
  const apiKey = process.env.NEXT_PUBLIC_ECHOTHREAD_API_KEY;
  if (!apiKey) return null;

  return (
    
      
      
    
  );
}

lazyOnload 전략을 사용하면 위젯이 Largest Contentful Paint (LCP)를 차단하지 않습니다.

4. 포스트 페이지에서 컴포넌트 사용하기

App Router (app/blog/[slug]/page.tsx)

import EchoThread from "@/components/EchoThread";

export default async function Post({ params }) {
  const post = await getPost(params.slug);
  return (
    
      
## {post.title}

      
      
    
  );
}

Pages Router

사용 방법은 동일합니다; pages/blog/[slug].tsx에서 컴포넌트를 가져오기만 하면 됩니다.

5. 소프트 네비게이션 처리

Next.js는 클라이언트 측 네비게이션을 수행하므로, URL이 변경될 때 위젯을 다시 마운트해야 합니다. 현재 경로에서 파생된 key를 사용해 컴포넌트를 감싸세요.

"use client";
import { usePathname } from "next/navigation";
import EchoThread from "@/components/EchoThread";

export default function EchoThreadWrapper() {
  const pathname = usePathname();
  return ;
}

Pages Router에서는 usePathname() 대신 useRouter().asPath를 사용합니다.

완료

위젯은 페이지 URL을 기준으로 자동으로 댓글 스레드를 식별합니다. 서버 컴포넌트는 서버 전용으로 남고, 댓글 섬만 클라이언트에서 하이드레이트됩니다.

전체 가이드(문제 해결 및 CSP 참고 사항 포함):