Actualizaciones de traducciones over-the-air en Next.js

Pasos de configuración

1. 1

   Crea una publicación

   En litei18n, confirma tus traducciones y crea una publicación en la página Releases (plan Starter o superior). Copia el ID de tu proyecto de la URL de la publicación que aparece allí. Exporta también tus traducciones en JSON y añádelas a tu app como copia incluida.

2. 2

   Carga la publicación al iniciar la app

   Define LITEI18N_PROJECT_ID en tu entorno y guarda tus archivos JSON exportados en locales/ como respaldo. revalidate indica a Next.js que busque una nueva publicación como mucho cada cinco minutos.

   lib/translations.tsCopiar

   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 los textos

   Llama a getTranslations en un componente de servidor y lee las claves del objeto que devuelve. Next.js guarda el resultado en caché y obtiene la nueva publicación en segundo plano.

   app/[locale]/page.tsxCopiar

   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 textos sin una nueva build

   Edita una traducción, confírmala y crea una nueva publicación. La URL latest ya sirve el texto nuevo y tu app lo recoge la próxima vez que cargue las traducciones. Sin nueva build ni revisión en la tienda.