Over-the-air translation updates in Next.js

Setup steps

1. 1

   Create a release

   In litei18n, commit your translations and create a release on the Releases page (Starter plan and above). Copy your project ID from the release URL shown there. Export your translations as JSON too, and add them to your app as the bundled copy.

2. 2

   Load the release when the app starts

   Set LITEI18N_PROJECT_ID in your environment and keep your exported JSON files in locales/ as a fallback. revalidate tells Next.js to look for a new release at most every five minutes.

   lib/translations.tsCopy

   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

   Use the strings

   Call getTranslations in a server component and read keys from the object it returns. Next.js caches the result and fetches a new release in the background.

   app/[locale]/page.tsxCopy

   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

   Change text without a new build

   Edit a translation, commit it and create a new release. The latest URL now serves the new text, and your app picks it up the next time it loads translations. No new build, no app store review.