i18n di Next.js per App Router, automatizzato

Come funziona

I file sotto app/ senza 'use client' sono componenti server, che non possono chiamare hook. Ottengono invece const { t } = await getTranslation(), da un modulo i18n.server generato che legge il cookie lang, poi Accept-Language.

I componenti client mantengono useTranslation(), e il layout principale passa loro la stessa lingua, quindi una pagina viene renderizzata in un'unica lingua sul server e sul client.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

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

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>
  );
}

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

Cosa aggiunge la configurazione

La prima esecuzione imposta react-i18next (server e client) se il progetto non lo ha ancora:

• i18next e react-i18next, src/i18n.ts e i18n.server.ts
• Un <I18nProvider> intorno al layout principale, e <html lang> che segue la lingua
• Un interruttore di lingua che imposta il cookie e si aggiorna, così i componenti server si ricaricano
• Un proxy.ts che serve /es/about con la pagina /about in spagnolo, e hreflang link tra le lingue, così i motori di ricerca indicizzano ciascuno

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.