Over-the-Air-Übersetzungen in Next.js

Schritte zur Einrichtung

1. 1

   Release erstellen

   Committe in litei18n deine Übersetzungen und erstelle auf der Seite Releases ein Release (ab dem Starter-Plan). Kopiere deine Projekt-ID aus der dort angezeigten Release-URL. Exportiere deine Übersetzungen außerdem als JSON und lege sie als mitgelieferte Kopie in deine App.

2. 2

   Release beim App-Start laden

   Setze LITEI18N_PROJECT_ID in deiner Umgebung und lege deine exportierten JSON-Dateien als Rückfall in locales/ ab. revalidate sagt Next.js, höchstens alle fünf Minuten nach einem neuen Release zu sehen.

   lib/translations.tsKopieren

   const PROJECT_ID = process.env.LITEI18N_PROJECT_ID;
   const RELEASES =
     'https://ttksowxkfdohtprtfarf.supabase.co/storage/v1/object/public/releases/locales';
   
   export async function getTranslations(locale: string): Promise<Record<string, string>> {
     try {
       const res = await fetch(`${RELEASES}/${PROJECT_ID}/latest/${locale}.json`, {
         next: { revalidate: 300 }, // look for a new release every 5 minutes
       });
       if (res.ok) return await res.json();
     } catch {
       // Network error: fall through to the bundled copy.
     }
     // The bundled copy, or English for a language you have not bundled.
     const bundled = await import(`../locales/${locale}.json`).catch(() => import('../locales/en.json'));
     return bundled.default;
   }

3. 3

   Texte verwenden

   Rufe getTranslations in einer Server-Komponente auf und lies die Keys aus dem zurückgegebenen Objekt. Next.js speichert das Ergebnis zwischen und holt ein neues Release im Hintergrund.

   app/[locale]/page.tsxKopieren

   import { getTranslations } from '@/lib/translations';
   
   export default async function Home({ params }: { params: Promise<{ locale: string }> }) {
     const { locale } = await params;
     const t = await getTranslations(locale);
     return <h1>{t['home.title']}</h1>;
   }

4. 4

   Texte ohne neuen Build ändern

   Bearbeite eine Übersetzung, committe sie und erstelle ein neues Release. Die latest-URL liefert jetzt den neuen Text, und deine App übernimmt ihn, wenn sie die Übersetzungen das nächste Mal lädt. Kein neuer Build, keine App-Store-Prüfung.