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 е наличен като променлива на средата 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, които нарушават съвместимостта (breaking changes), или функции никога няма да бъдат включвани в основната библиотека без повишение на версията в тази библиотека.