Next.js i18n pour l'App Router, automatisé

Comment ça marche

Les fichiers sous app/ sans 'use client' sont des composants serveur, qui ne peuvent pas appeler de hooks. Ils obtiennent const { t } = await getTranslation() à la place, à partir d'un module i18n.server généré qui lit le cookie lang, puis Accept-Language.

Les composants client conservent useTranslation(), et la mise en page racine leur transmet la même langue, de sorte qu'une page s'affiche dans une seule langue sur le serveur et le client.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

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."
  }
}

Ce que l'installation ajoute

La première exécution configure react-i18next (serveur et client) si le projet ne l'a pas encore :

• i18next et react-i18next, src/i18n.ts et i18n.server.ts
• Un <I18nProvider> autour de la mise en page racine, et <html lang> qui suit la langue
• Un sélecteur de langue qui définit le cookie et actualise, afin que les composants serveur se réaffichent
• Un proxy.ts servant /es/about avec la page /about en espagnol, et des liens hreflang entre les langues, afin que les moteurs de recherche indexent chacun d'eux

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

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

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.