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 變更或新功能，絕不會在未對此函式庫進行版本提升的情況下發佈到底層核心函式庫。