Añade un agente de voz con IA a Next.js

Cómo añadir AnveVoice a una aplicación Next.js

Importa Script desde next/script y renderízalo una vez en tu layout raíz (App Router) o en pages/_app (Pages Router). Next.js carga el script una sola vez durante la navegación en el cliente. La estrategia predeterminada afterInteractive encaja con un widget de voz. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: app/layout.tsx (App Router) o pages/_app.tsx (Pages Router)
• Componente: Script de next/script, con estrategia afterInteractive (predeterminada) o lazyOnload
• Programación necesaria: Unas pocas líneas de JSX; no hay paquete que instalar
• Tiempo: Unos 5 minutos, incluida una compilación de prueba

Antes de empezar

Crea el bot en app.anvevoice.app (el plan Free cuesta 0 US$, sin tarjeta) y copia el embed ID. No pegues el elemento HTML script sin procesar en un layout: en Next.js, la ruta idiomática es el componente Script integrado de next/script, que controla cuándo se carga el archivo respecto a la hidratación. Comprueba qué router usas. Un proyecto con un directorio app/ y layout.tsx usa el App Router; un proyecto con pages/_app.tsx usa el Pages Router. Si tienes ambos, instala la etiqueta en el archivo de nivel superior de cada router. El código de abajo sigue la documentación actual de Next.js, que describe la versión 16.

App Router: el layout raíz

La guía de scripts de Next.js indica cargar un script de terceros para todas las rutas incluyéndolo en tu layout raíz, y que Next.js asegura que solo se carga una vez, incluso cuando el visitante se mueve entre páginas. El componente Script funciona dentro de un layout de Server Component, así que no necesitas la directiva use client salvo que añadas los manejadores onLoad, onReady u onError.

• 1. Abre el layout raíz — Edita app/layout.tsx (o app/layout.js). Es el archivo que renderiza los elementos html y body.
• 2. Añade el componente Script — Importa Script desde next/script y renderízalo dentro de body, después de children, como en el ejemplo. Sustituye YOUR_EMBED_ID por tu propio valor. import Script from "next/script"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> {children} <Script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" strategy="afterInteractive" /> </body> </html> ); }
• 3. Reinicia y prueba — Ejecuta next dev o una compilación de producción. El botón del micrófono debería aparecer abajo a la derecha en todas las rutas.

Pages Router: _app

Para el Pages Router, Next.js documenta la misma idea en el componente App personalizado: incluye Script junto al componente de página para que se cargue en cualquier ruta a la que se acceda.

• 1. Abre pages/_app.tsx — Crea el archivo si no lo tienes; Next.js lo usa para envolver cada página.
• 2. Renderiza el Script junto a la página — Añade el Script después de Component para que el contenido de la página se renderice primero. import type { AppProps } from "next/app"; import Script from "next/script"; export default function MyApp({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" strategy="afterInteractive" /> </> ); }

Elegir una estrategia

Next.js ofrece cuatro estrategias de carga. afterInteractive es la predeterminada: se carga pronto, pero después de cierta hidratación; la documentación cita los gestores de etiquetas y la analítica como usos típicos. lazyOnload espera a que el navegador esté inactivo, y la documentación pone como ejemplo los plugins de chat de soporte, que es la categoría en la que encaja un widget de voz. Elige afterInteractive si quieres que el botón sea visible en cuanto la página sea interactiva, o lazyOnload si prefieres proteger tu puntuación de Lighthouse y aceptar un breve retraso. Evita beforeInteractive. Está pensada para scripts críticos, como detectores de bots y gestores de consentimiento de cookies, y la documentación indica que se inyecta en el head y debe estar en un layout raíz. La estrategia worker es experimental y, según la referencia de Next.js, no funciona con el App Router.

Alcance y eliminación

La recomendación de la documentación de Next.js es incluir los scripts de terceros solo en las páginas o layouts que los necesiten. Para mostrar el agente solo en páginas de marketing, pon el Script en un layout de grupo de rutas, como app/(marketing)/layout.tsx, en lugar del layout raíz. Para eliminarlo más adelante, borra el componente y vuelve a desplegar; no se requiere ninguna otra limpieza.

Comprueba que funciona

• 1. Compila y ejecuta en modo producción — Ejecuta next build y next start para probar lo que recibirán los visitantes, no el servidor de desarrollo.
• 2. Abre el sitio y localiza el botón — Aparece un botón redondo de micrófono abajo a la derecha. Haz clic en él, permite el acceso al micrófono y haz una pregunta.
• 3. Navega entre páginas — Recorre algunos enlaces. El botón debería permanecer en su sitio sin recargarse, ya que el script se carga una sola vez.

Problemas habituales

• No se carga nada: confirma que el Script está dentro del layout raíz que envuelve tus páginas, y no dentro de un layout anidado de otro grupo de rutas.
• Errores de Content Security Policy: si envías una cabecera CSP desde middleware o next.config, permite https://anvevoice.app en script-src. El componente Script reenvía un atributo nonce que le pases.
• Micrófono bloqueado: una cabecera Permissions-Policy que deje el micrófono vacío bloquea la solicitud del navegador. Permite el micrófono para self.
• Avisos de hidratación: suelen venir de otro código. El componente Script no renderiza marcado visible propio.

Fuentes

• Documentación de Next.js: cómo cargar y optimizar scripts (App Router) (https://nextjs.org/docs/app/guides/scripts) — consultado el 2026-10-14
• Documentación de Next.js: referencia de la API del componente Script (https://nextjs.org/docs/app/api-reference/components/script) — consultado el 2026-10-14
• Documentación de Next.js: scripts (Pages Router) (https://nextjs.org/docs/pages/guides/scripts) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a un sitio alojado en Netlify
• Cómo añadir AnveVoice a una aplicación de React Router
• Cómo añadir AnveVoice con Google Tag Manager

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.