블로그에 댓글 시스템 추가하기

뭔가 휑한 블로그

Giscus

• 오픈 소스입니다. 🌏

• 사용자 추적도, 광고도 없습니다. 항상 무료입니다. 📡 🚫

• 데이터베이스가 필요 없습니다. 모든 데이터는 GitHub Discussions에 저장됩니다. 🐙🐈‍⬛

• 커스텀 테마 제작을 지원합니다! 🌗

• 여러 언어를 지원합니다. 🌐

• 여러 설정을 제공합니다. 🔧

• 자동으로 GitHub에서 새로운 댓글과 수정 사항을 반영합니다. 🔃

• 셀프 호스팅이 가능합니다! 🤳

블로그에 도입해보자!

// [slug]/page.tsx

// 메타데이터 설정
export async function generateMetadata({ params }: Props): Promise<Metadata> { ... }

// ISR 적용
export const revalidate = 3600;
export const dynamicParams = true;
export async function generateStaticParams() { ... }

type RecordPageProps = { params: Promise<{ slug: string }> };
export default async function RecordPage({ params }: RecordPageProps) {
  const { slug } = await params;
  const recordMap = await getPageByPageId(slug);

  return (
    <RecordPageLayout>
      <NotionPage recordMap={recordMap} />
    </RecordPageLayout>
  );
}

// Notion API로 글 내용 가져오기
function getPageByPageId(pageId: string) {
  return notionAPI.getPage(pageId);
}

// NotionPage.tsx

"use client";

type NotionPageProps = { recordMap: ExtendedRecordMap };
export function NotionPage({ recordMap }: NotionPageprops) {
  // ...
  
  return (
    <NotionRenderer
      recordMap={recordMap}
      // ...
    />
  );
}

// Comments.tsx

"use client";

import Giscus from "@giscus/react";

export function Comments() {
  return (
    <Giscus
      id="comments"
      repo="..."
      repoId="..."
      category="Announcements"
      categoryId="..."
      mapping="title"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="noborder_light"
      lang="ko"
      loading="lazy"
    />
  );
}

// [slug]/page.tsx

// ...
export default async function RecordPage({ params }: RecordPageProps) {
  // ...
  
  return (
    <RecordPageLayout>
      <NotionPage recordMap={recordMap} />
      <Comments /> {/* 여기에 댓글을 보여줍니다. */}
    </RecordPageLayout>
  );
}

• RecordPage 가 있는 파일은 generateMetadata 및 generateStaticParams 를 활용하고 있으므로, 서버 컴포넌트여야 함.

• NotionPage 는 동일한 클라이언트 컴포넌트이고 글 내용과 댓글이 UI 상으로는 붙어있기는 해도, 서로 같이 붙어있어야 할 이유는 없고 단일 책임을 위반하기 때문에 해당 위치에 Giscus 컴포넌트를 구현하지 않음.

• 레이아웃 컴포넌트 파일에 Giscus 컴포넌트가 있는 것 또한 위와 같은 사유로 옳지 않아보임.

댓글 시스템 추가 후

후기