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 або нові функції ніколи не будуть випущені для базової бібліотеки без підвищення версії цієї бібліотеки.