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 更改或功能，绝不会在未对本库进行版本提升的情况下发布。