Add Comments to Your Next.js App

Para ver cada componente y flujo ejecutándose localmente contra el tenant público demo, clona el repositorio y ejecuta:

cd example
npm install
npm run dev

Cada componente tiene su propia ruta bajo example/app/ que puedes copiar directamente en tu propia aplicación Next.js.

npm install fastcomments-nextjs

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

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

Sustituye "demo" por el ID de tenant de FastComments. El componente ya declara 'use client', por lo que puedes renderizarlo desde un componente del servidor.

Todos los componentes se exportan desde la raíz del paquete:

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

Si ha instalado FastComments a través de la integración del Vercel Marketplace, el ID de su tenant está disponible como la variable de entorno FASTCOMMENTS_TENANT_ID. Para leerlo en el cliente, expóngalo a través de next.config.js o añádale el prefijo NEXT_PUBLIC_:

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

Se incluye una demostración funcional en el directorio example/:

cd example && npm install && npm run dev

• Documentación de FastComments
• Personalización y configuración
• Documentación de Next.js

Estos componentes son envoltorios alrededor de nuestros componentes core de VanillaJS. Podemos actualizar automáticamente estos componentes (corregir errores, añadir funciones) sin publicar esta biblioteca, así que, aunque no se publique por un tiempo, eso no significa que FastComments no esté en desarrollo activo. No dudes en consultar nuestro blog para actualizaciones. Los cambios incompatibles en la API o las nuevas funcionalidades nunca se incorporarán a la biblioteca core subyacente sin un aumento de versión en esta biblioteca.