Next.js i18n für den App Router, automatisiert

Funktionsweise

Dateien unter app/ ohne 'use client' sind Serverkomponenten, die keine Hooks aufrufen können. Sie erhalten stattdessen const { t } = await getTranslation() aus einem generierten i18n.server-Modul, das das lang-Cookie und dann Accept-Language liest.

Clientkomponenten behalten useTranslation(), und das Root-Layout übergibt ihnen dieselbe Sprache, sodass eine Seite auf dem Server und dem Client in einer Sprache gerendert wird.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

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

Was das Setup hinzufügt

Der erste Durchlauf richtet react-i18next (Server und Client) ein, falls das Projekt es noch nicht hat:

• i18next und react-i18next, src/i18n.ts und i18n.server.ts
• Ein <I18nProvider> um das Root-Layout und <html lang>, das der Sprache folgt
• Ein Sprachumschalter, der das Cookie setzt und aktualisiert, sodass Serverkomponenten neu gerendert werden
• Ein proxy.ts, das /es/about mit der /about-Seite auf Spanisch bedient, und hreflang-Links zwischen Sprachen, damit Suchmaschinen jede Seite indizieren

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.