Aggiornamenti delle traduzioni over-the-air in Next.js

Passaggi di configurazione

1. 1

   Crea una release

   In litei18n, esegui il commit delle traduzioni e crea una release nella pagina Releases (dal piano Starter in su). Copia l'ID del progetto dall'URL della release mostrato lì. Esporta anche le traduzioni in JSON e aggiungile alla tua app come copia inclusa.

2. 2

   Carica la release all'avvio dell'app

   Imposta LITEI18N_PROJECT_ID nel tuo ambiente e tieni i file JSON esportati in locales/ come riserva. revalidate dice a Next.js di cercare una nuova release al massimo ogni cinque minuti.

   lib/translations.tsCopia

   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

   Usa i testi

   Chiama getTranslations in un componente server e leggi le chiavi dall'oggetto restituito. Next.js mette in cache il risultato e recupera la nuova release in background.

   app/[locale]/page.tsxCopia

   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

   Cambia i testi senza una nuova build

   Modifica una traduzione, esegui il commit e crea una nuova release. L'URL latest ora restituisce il nuovo testo e la tua app lo riceve la prossima volta che carica le traduzioni. Nessuna nuova build, nessuna revisione dello store.