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 или новые функции никогда не будут отправлены в базовую библиотеку без повышения версии в этой библиотеке.