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 tenant ID. Компонент уже объявляет 'use client', поэтому вы можете рендерить его из серверного компонента.

Все компоненты экспортируются из корня пакета:

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

Если вы установили FastComments через интеграцию Vercel Marketplace, ваш tenant 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, нарушающие совместимость, или новые возможности никогда не будут добавлены в базовую ядровую библиотеку без повышения версии этой библиотеки.