تحديث الترجمات عبر الهواء في Next.js

خطوات الإعداد

1. 1

   أنشئ إصدارًا

   في litei18n، اعتمد ترجماتك وأنشئ إصدارًا من صفحة Releases (خطة Starter وما فوقها). انسخ معرّف مشروعك من رابط الإصدار الظاهر هناك. وصدّر ترجماتك أيضًا بصيغة JSON وأضفها إلى تطبيقك كنسخة مضمّنة.

2. 2

   حمّل الإصدار عند تشغيل التطبيق

   عيّن LITEI18N_PROJECT_ID في بيئتك واحتفظ بملفات JSON المصدَّرة في locales/ كبديل احتياطي. يطلب revalidate من Next.js البحث عن إصدار جديد مرة كل خمس دقائق على الأكثر.

   lib/translations.tsنسخ

   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

   استخدم النصوص

   استدعِ getTranslations في مكوّن خادم واقرأ المفاتيح من الكائن الذي تعيده. يخزّن Next.js النتيجة مؤقتًا ويجلب الإصدار الجديد في الخلفية.

   app/[locale]/page.tsxنسخ

   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

   غيّر النصوص دون إصدار جديد

   عدّل ترجمة واعتمدها وأنشئ إصدارًا جديدًا. سيقدّم رابط latest النص الجديد، ويحصل عليه تطبيقك في المرة التالية التي يحمّل فيها الترجمات. لا حاجة إلى إصدار جديد ولا إلى مراجعة من متجر التطبيقات.