Documentación / Next.js

Next.js i18n para el App Router, automatizado

Localiza una aplicación Next.js App Router: los componentes del servidor obtienen un traductor esperado, los componentes del cliente useTranslation, y el idioma sigue una cookie. Un comando o una solicitud de extracción.

Cómo funciona

Los archivos en app/ sin 'use client' son componentes del servidor, que no pueden llamar a hooks. En su lugar, obtienen const { t } = await getTranslation() de un módulo i18n.server generado que lee la cookie lang y luego Accept-Language.

Los componentes del cliente conservan useTranslation(), y el layout raíz les pasa el mismo idioma, por lo que una página se renderiza en un idioma en el servidor y el cliente.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

app/page.tsx · antes

export default function Home() {
  return (
    <main>
      <h1>Ship in every language</h1>
      <p>Start a free trial today.</p>
    </main>
  );
}

app/page.tsx · después

import { useTranslation } from 'react-i18next';

export default function Home() {
  const { t } = useTranslation();
  return (
    <main>
      <h1>{t('home.ship_in_every_language')}</h1>
      <p>{t('home.start_a_free_trial_today')}</p>
    </main>
  );
}

locales/en.json

{
  "home": {
    "ship_in_every_language": "Ship in every language",
    "start_a_free_trial_today": "Start a free trial today."
  }
}

Lo que añade la configuración

La primera ejecución configura react-i18next (servidor y cliente) si el proyecto aún no lo tiene:

i18next y react-i18next, src/i18n.ts y i18n.server.ts
Un <I18nProvider> alrededor del layout raíz, y <html lang> que sigue el idioma
Un selector de idioma que establece la cookie y actualiza, para que los componentes del servidor se vuelvan a renderizar
Un proxy.ts que sirve /es/about con la página /about en español, y enlaces hreflang entre idiomas, para que los motores de búsqueda indexen cada uno

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.