Verbesserte Internationalisierung (i18n) im nächsten.js 14

next.js 14 vereinfacht die mehrsprachige Website -Entwicklung. Dieser Artikel zeigt, dass eine mehrsprachige nächste Anwendung erstellt wird.

Schlüsselmerkmale:

optimierte mehrsprachige Entwicklung mit Sprachrouting und dynamischem Nachrichtenladen.
Praktische Anleitung zur Internationalisierung (I18N) in Next.js 14, einschließlich Projekt-Setup, I18N-Konfiguration, JSON-basierter Übersetzung und sprachspezifischer Routing.
detaillierte Erläuterung des Erstellens von Sprachschnecken für eine verbesserte Inhaltsorganisation, insbesondere für Blogs oder Produktkataloge. Dies beinhaltet dynamische Nachrichtenlade-, Gebietsschalen-Matching-Middleware für Umleitung und Änderungen an Layout- und Seitenkomponenten.
Implementierung eines benutzerfreundlichen dynamischen Sprachschalters mit dem Router und Hooks von Next.js, Verbesserung der Benutzererfahrung.

Erstellen eines mehrsprachigen nächsten.js 14 App:

Der Prozess umfasst die folgenden Schritte:

1. Projekt -Setup: Erstellen Sie ein neues Next.js -Projekt (z. B. ) und installieren Sie npx create-next-app my-i18n-app und next@latest. Konfigurieren Sie next-intl mit dem next.config.js -Plugin. next-intl

2. Gebietsschemaspezifischer Inhalt:

   Erstellen Sie einen -Fordner mit JSON-Dateien (z. B. , content, en.json), das Übersetzungen für jedes Gebietsschema enthält. Dies kompensiert das aktuelle Mangel an automatischer Übersetzung von Next.js. es.json de.json

3. Dynamisches Nachrichten Laden:

   Erstellen Sie eine -Datei, um Nachrichten -JSON -Dateien basierend auf dem erkannten Gebietsschema dynamisch zu importieren. Stellen Sie sicher, dass sich der Inhalt den Einstellungen der Benutzersprache anpasst. Fehlerbehandlung (z. B. für nicht unterstützte Gebiete) ist entscheidend. i18n.ts notFound

4. Sprachrouting und Middleware:

   Implementieren Sie eine -Datei mit , um unterstützte Orte, ein Standard -Gebietsschema und Routing -Regeln zu definieren, um die Benutzer zur entsprechenden Sprachversion der Website zu leiten. Die middleware.ts -Konfiguration stellt sicher, dass nur internationalisierte Pfade verarbeitet werden. next-intl/middleware matcher

5. Layout- und Seitenkomponenten:

   Ändern Sie die Layout- und Seitenkomponenten (z. B. , ), um den app/layout.tsx -Haken von app/page.tsx zum Zugriff übersetzt übersetzte Inhalte zu verwenden. Strukturieren Sie Ihre Komponenten, um verschiedene Sprachversionen effektiv zu verarbeiten. useTranslations

6. Sprachschalterkomponente: Erstellen Sie eine LangSwitcher.tsx -Komponente, die den Router von Next.js verwendet, und usePathname, um die Sprachauswahl und -routing zu verwalten. Diese Komponente bietet eine benutzerfreundliche Schnittstelle zum Umschalten zwischen Sprachen. Integrieren Sie diese Komponente in Ihr Layout (z. B. app/layout.tsx).

Die vollständigen Codebeispiele für jeden Schritt sind im ursprünglichen Artikel verfügbar. Diese überarbeitete Antwort bietet einen prägnanteren und organisierten Überblick, wobei die wichtigsten Informationen und die Bildplatzierung beibehalten werden.

Das obige ist der detaillierte Inhalt vonVerbesserte Internationalisierung (i18n) im nächsten.js 14. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!