Möchtest du das nicht manuell einrichten? Füge einen Link zu dieser Seite in eine Devin-Sitzung ein und bitte Devin, alles für dich einzurichten. Wenn du dir unsicher bist, wie deine Next.js-App strukturiert ist oder welche Komponenten hardcodierte Strings enthalten, verwende [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery), um dies zunächst zu analysieren: ```txt Scope the i18n work theme={null} Help me understand the scope of adding i18n to our Next.js app: 1. Are we using the Pages Router or App Router? 2. How many components and pages have hardcoded English strings? 3. Do we already have any i18n setup or locale files? 4. Which shared components (buttons, forms, modals) contain text? 5. Are there any strings that should stay in English (brand names, API codes)? ``` Du kannst auch direkt aus Ask Devin heraus eine Devin-Session starten; alle Informationen, die Devin dabei gesammelt hat, werden dann als Kontext übernommen. Internationalisierung zu einer Next.js-App hinzuzufügen bedeutet, Locale-Routing einzurichten, Middleware zu konfigurieren, jeden hartcodierten String zu extrahieren und Übersetzungsdateien zu erstellen – alles, bevor du auch nur einen einzigen Sprachwechsel testen kannst. Devin übernimmt die gesamte Pipeline: Installation von `next-i18next`, Konfiguration des Next.js-Locale-Routings, Extraktion von Strings aus Dutzenden von Komponenten und Verifizierung des Ergebnisses im Browser. ```txt Add Japanese and Spanish to our Next.js app theme={null} Füge unserer Next.js-App mithilfe von next-i18next Internationalisierung hinzu. - Installiere next-i18next, i18next und react-i18next - Konfiguriere next-i18next.config.js mit defaultLocale "en" und locales ["en", "es", "ja"] - Aktualisiere next.config.js, um die i18n-Konfiguration einzubinden - Scanne components/ und pages/ nach allen hartcodierten englischen Strings (JSX-Text, placeholder-Attribute, aria-labels, Fehlermeldungen, Tooltips) - Erstelle strukturierte Locale-Dateien unter public/locales/{en,es,ja}/common.json mit Namespaced-Keys (z. B. common.save, auth.loginButton, errors.notFound) - Ersetze jeden hartcodierten String durch einen t()-Aufruf mit useTranslation('common') - Füge serverSideTranslations zu getStaticProps / getServerSideProps jeder Seite hinzu - Füge ein Sprachumschalter-Dropdown-Menü zu components/Navbar.tsx hinzu, das Next/router-Locale-Switching verwendet - Verwende Platzhalterübersetzungen für Spanisch und Japanisch – wir ersetzen sie später durch professionelle Übersetzungen - Starte die App und wechsle zwischen allen drei Sprachen, um sicherzustellen, dass nichts kaputtgeht ## Testing & verification - Starte den Dev-Server und wechsle zwischen den Routen /en, /es und /ja - Überprüfe jede Seite auf übrig gebliebene, nicht übersetzte englische Strings - Stelle sicher, dass der Sprachumschalter korrekt umschaltet - Teste, dass interpolierte Werte (Namen, Zähler) in jedem Locale korrekt gerendert werden - Prüfe, dass Layouts nicht kaputtgehen durch längere spanische Strings oder breitere japanische Zeichen - Falls irgendetwas kaputt ist – fehlende Übersetzungen, Layout-Überläufe, Routing-Fehler – behebe es und teste erneut. Iteriere so lange, bis alle drei Sprachen auf jeder Seite korrekt dargestellt werden. - Öffne keinen PR, bevor nicht alles End-to-End funktioniert ``` Verwende den **`/plan`**-Slash-Befehl zu Beginn der Session, damit Devin zuerst deine Codebasis untersucht – es wird ermitteln, ob du den Pages Router oder den App Router verwendest, die richtige i18n-Bibliothek identifizieren und seinen Ansatz skizzieren, bevor Code geschrieben wird. Überprüfe den Plan und schlage Änderungen vor, bevor Devin startet. Devin arbeitet sich systematisch durch deine Next.js-Codebasis – konfiguriert die i18n-Pipeline, extrahiert Strings und erstellt Locale-Dateien. Dabei geht Devin wie folgt vor: 1. **Installiert Abhängigkeiten** — Führt `npm install next-i18next i18next react-i18next` aus und erstellt die Konfigurationsdateien: ```js theme={null} // next-i18next.config.js module.exports = { i18n: { defaultLocale: 'en', locales: ['en', 'es', 'ja'], }, }; ``` ```js theme={null} // next.config.js const { i18n } = require('./next-i18next.config'); module.exports = { i18n, // ...Ihre bestehende Konfiguration }; ``` 2. **Scannt jede Komponente** — Liest jede Datei in `components/` und `pages/` und identifiziert hartcodierten Text in JSX, Attributen wie `placeholder` und `aria-label`, Template-Literalen und Fehlermeldungen 3. **Erstellt Locale-Dateien** — Erzeugt strukturierte JSON-Dateien unter `public/locales/`: ```json theme={null} // public/locales/en/common.json { "common": { "save": "Speichern", "cancel": "Abbrechen", "loading": "Wird geladen..." }, "auth": { "login": "Anmelden", "signup": "Konto erstellen", "forgotPassword": "Passwort vergessen?" }, "dashboard": { "welcome": "Willkommen zurück, {{name}}", "items_one": "{{count}} Element", "items_other": "{{count}} Elemente" } } ``` ```json theme={null} // public/locales/ja/common.json { "common": { "save": "保存", "cancel": "キャンセル", "loading": "読み込み中..." }, "auth": { "login": "ログイン", "signup": "アカウント作成", "forgotPassword": "パスワードをお忘れですか？" }, "dashboard": { "welcome": "おかえりなさい、{{name}}", "items_one": "{{count}} 件", "items_other": "{{count}} 件" } } ``` ```json theme={null} // public/locales/es/common.json { "common": { "save": "Guardar", "cancel": "Cancelar", "loading": "Cargando..." }, "auth": { "login": "Iniciar sesión", "signup": "Crear cuenta", "forgotPassword": "¿Olvidaste tu contraseña?" }, "dashboard": { "welcome": "Bienvenido de nuevo, {{name}}", "items_one": "{{count}} elemento", "items_other": "{{count}} elementos" } } ``` 4. **Ersetzt Strings direkt im Code** — Wrappt jede Komponente mit `useTranslation('common')` und ersetzt fest codierten Text durch `t()`-Aufrufe, inklusive Interpolation für dynamische Werte wie `t('dashboard.welcome', { name: user.name })` 5. **Richtet serverseitiges Laden ein** — Fügt jeder Seite `serverSideTranslations` hinzu, damit Übersetzungen beim Rendern verfügbar sind: ```tsx theme={null} // pages/dashboard.tsx import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; export const getStaticProps = async ({ locale }) => ({ props: { ...(await serverSideTranslations(locale, ['common'])), }, }); ``` 6. **Fügt den Sprachumschalter hinzu** — Erstellt ein Dropdown-Menü in der Navigationsleiste, das die Locale-Umschaltung des Next.js-Routers nutzt: ```tsx theme={null} // components/LanguageSwitcher.tsx import { useRouter } from 'next/router'; export default function LanguageSwitcher() { const router = useRouter(); const switchLocale = (locale: string) => { router.push(router.pathname, router.asPath, { locale }); }; return ( ); } ``` Devin führt `npm run dev` aus, öffnet die App in seinem [integrierten Browser](/de/work-with-devin/devin-session-tools) und navigiert zwischen den Routen `/en`, `/es` und `/ja`, um sicherzustellen, dass alles funktioniert. Wenn etwas nicht funktioniert – eine fehlende Übersetzung, ein Layout, das überläuft, eine Route, die einen 404 zurückgibt – behebt Devin das Problem und testet automatisch erneut. Verwende jederzeit den **`/test`**-Slash-Befehl, um Devin anzuweisen, alle Tests erneut auszuführen und im Browser erneut zu verifizieren. Verwende **`/review`** vor dem finalen PR, damit Devin seinen eigenen Code auf übersehene Strings, inkonsistente Schlüsselnamen oder fehlende `serverSideTranslations`-Aufrufe prüft. Devin prüft: * Alle sichtbaren Texte sind übersetzt (keine übrig gebliebenen englischen Strings im Spanisch-/Japanisch-Modus) * Layouts brechen nicht mit längeren spanischen Strings oder breiteren japanischen Zeichen * Der Sprachumschalter wechselt zwischen allen drei Locales * Interpolierte Werte (Benutzernamen, Zählwerte) werden in jedem Locale korrekt ausgegeben * Pluralisierungsregeln funktionieren (z. B. "1 item" → "1 件" auf Japanisch, "1 elemento" auf Spanisch) * Das Next.js-Locale-Routing funktioniert – `/ja/dashboard` zeigt die japanische Version Sobald das grundlegende i18n-Setup steht, erweitern Sie es in einem Folgeschritt. ```txt Professionelle Übersetzungen einspielen theme={null} Ersetzen Sie die spanischen und japanischen Platzhalterübersetzungen durch diese professionellen Übersetzungen unseres Anbieters. [Fügen Sie die übersetzten JSON-Dateien bei.] Stellen Sie sicher, dass alle Keys in public/locales/en/common.json abgedeckt sind und keine Platzhalter mehr in den es- und ja-Dateien verbleiben. ``` ```txt Koreanisch als vierte Locale hinzufügen theme={null} Fügen Sie Koreanisch (ko) als neue Locale hinzu. Aktualisieren Sie next-i18next.config.js, sodass "ko" im locales-Array enthalten ist, erstellen Sie public/locales/ko/common.json mit Platzhalterübersetzungen, fügen Sie die Option im LanguageSwitcher hinzu und überprüfen Sie, dass /ko-Routen im Browser funktionieren. ``` ```txt Übersetzungen nach Seitennamespace aufteilen theme={null} Unsere common.json wird groß. Teilen Sie sie in separate Namespace-Dateien auf: public/locales/{en,es,ja}/auth.json, dashboard.json und settings.json. Aktualisieren Sie den serverSideTranslations-Aufruf jeder Seite so, dass nur die Namespaces geladen werden, die sie benötigt. ``` Diese Aufgabe installiert neue Abhängigkeiten (`next-i18next`, `i18next`, `react-i18next`). Nachdem der PR gemergt wurde, aktualisiere deine [Umgebungskonfiguration](/de/onboard-devin/environment), damit Devins Environment-Snapshot diese Pakete für zukünftige Sessions enthält: 1. Gehe zu [**Settings > Devin's Environment > Repositories**](https://app.devin.ai/settings/machine?utm_source=docs\&utm_medium=use-case-gallery) 2. Wähle dein Repo aus und klicke auf **Configure** 3. Stelle unter **Upkeep > Maintain dependencies** sicher, dass dein Installationsbefehl (z. B. `npm ci`) konfiguriert ist 4. Klicke auf **Save**, um den Snapshot zu aktualisieren Du kannst auch eine **Upkeep Frequency** festlegen, damit Devin die Installation der Abhängigkeiten automatisch nach einem Zeitplan erneut ausführt – so bleibt der Snapshot aktuell, während sich deine `package.json` weiterentwickelt, und zukünftige Sessions verschwenden keine Zeit mit der Installation von Paketen beim Start. Sobald Devin den PR erstellt hat, nutze [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery), um die i18n-Änderungen zu prüfen. Devin Review kann übersehene hardcodierte Strings, inkonsistente Benennungen von Übersetzungsschlüsseln und fehlende `serverSideTranslations`-Aufrufe auf verschiedenen Seiten aufspüren.

{title}