Next.js 앱에 댓글 추가

공용 demo 테넌트에 대해 모든 컴포넌트와 플로우가 로컬에서 실행되는 것을 보려면, 저장소를 클론하고 다음을 실행하세요:

cd example
npm install
npm run dev

각 컴포넌트는 example/app/ 아래에 자체 라우트를 가지고 있으며, 이를 그대로 복사하여 자신의 Next.js app에 붙여넣을 수 있습니다.

npm install fastcomments-nextjs

• Next.js 13, 14, 15 또는 16
• React 18 또는 19

// app/page.tsx
import { FastComments } from 'fastcomments-nextjs';

export default function Page() {
    return <FastComments tenantId="demo" />;
}

"demo"를 FastComments 테넌트 ID로 바꿔주세요. 컴포넌트는 이미 'use client'를 선언하고 있으므로 서버 컴포넌트에서 렌더링할 수 있습니다.

모든 컴포넌트는 패키지 루트에서 내보내집니다:

import {
    FastComments,
    FastCommentsLiveChat,
    FastCommentsReviewsSummary,
} from 'fastcomments-nextjs';

Vercel Marketplace 통합을 통해 FastComments를 설치한 경우, 테넌트 ID는 FASTCOMMENTS_TENANT_ID 환경 변수로 제공됩니다. 클라이언트에서 읽으려면 next.config.js를 통해 노출하거나 NEXT_PUBLIC_ 접두사를 붙이세요:

<FastComments tenantId={process.env.NEXT_PUBLIC_FASTCOMMENTS_TENANT_ID!} />

작동하는 데모는 example/ 디렉터리에 포함되어 있습니다:

cd example && npm install && npm run dev

• FastComments 문서
• 맞춤 설정 및 구성
• Next.js 문서

이 컴포넌트들은 당사의 핵심 VanillaJS 컴포넌트를 감싼 래퍼입니다. 우리는 이 라이브러리를 배포하지 않고도 이 컴포넌트들을 자동으로 업데이트(버그 수정, 기능 추가)할 수 있으므로, 잠시 동안 배포되지 않는다고 해서 FastComments가 활발히 개발되지 않는다는 의미는 아닙니다! 업데이트는 우리 블로그를 확인하세요. 하위 호환성을 깨는(API breaking) 변경이나 새로운 기능은 이 라이브러리의 버전이 올려지지 않는 한 기본(core) 라이브러리에 절대 반영되지 않습니다.