Add Comments to Your Next.js App

公開されている demo テナントに対してローカルで全てのコンポーネントとフローが動作しているのを確認するには、リポジトリをクローンして次を実行してください：

cd example
npm install
npm run dev

各コンポーネントは example/app/ 以下にそれぞれのルートを持っており、そのまま自分の Next.js アプリにコピーできます。

npm install fastcomments-nextjs

// 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 の変更や機能は、このライブラリでバージョンを上げない限り、基盤となるコアライブラリに導入されることは決してありません。