Add Comments to Your Next.js App

Para ver todos os componentes e fluxos sendo executados localmente contra o tenant público demo, clone o repositório e execute:

cd example
npm install
npm run dev

Cada componente tem sua própria rota em example/app/ que você pode copiar diretamente para o seu próprio aplicativo Next.js.

npm install fastcomments-nextjs

// app/page.tsx
import { FastComments } from 'fastcomments-nextjs';

export default function Page() {
    return <FastComments tenantId="demo" />;
}

Substitua "demo" pelo ID do seu tenant do FastComments. O componente já declara 'use client', então você pode renderizá-lo a partir de um componente de servidor.

Todos os componentes são exportados a partir da raiz do pacote:

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

Se você instalou o FastComments através da integração com o Vercel Marketplace, seu ID do tenant está disponível como a variável de ambiente FASTCOMMENTS_TENANT_ID. Para lê-lo no cliente, exponha-o através do next.config.js ou prefixe-o com NEXT_PUBLIC_:

<FastComments tenantId={process.env.NEXT_PUBLIC_FASTCOMMENTS_TENANT_ID!} />

Uma demonstração funcional está incluída no diretório example/:

cd example && npm install && npm run dev

• Documentação do FastComments
• Personalização e Configuração
• Documentação do Next.js

Esses componentes são wrappers ao redor dos nossos componentes core do VanillaJS. Podemos atualizar automaticamente esses componentes (corrigir bugs, adicionar recursos) sem publicar esta biblioteca, então, embora ela possa não ser publicada por um tempo, isso não significa que o FastComments não esteja em desenvolvimento ativo! Sinta-se à vontade para conferir nosso blog para atualizações. Alterações ou recursos que quebrem a API nunca serão enviados para a biblioteca core subjacente sem um aumento de versão nesta biblioteca.