Better I18Nحول هذا النموذج
هذا نموذج بداية يوضح كيفية استخدام better-i18n مع Next.js App Router لبناء تطبيقات متعددة اللغات.
التقنية المستخدمة
Next.js 15
App Router + مكونات الخادم
@better-i18n/next
ترجمات مدعومة بـ CDN
next-intl
خطافات ترجمة آمنة النوع
Tailwind CSS 4
تنسيق أولوي بالأدوات المساعدة
TypeScript 5
أمان كامل للأنواع
بنية ترجمة CDN
اعرف المزيدتستخدم better-i18n بنية CDN-أولاً. عند نشر الترجمات في لوحة التحكم، يتم نشرها على شبكة Cloudflare العالمية لتوصيل أقل من 50ms في جميع أنحاء العالم.
نشر من لوحة التحكم
تُنشر الترجمات من لوحة تحكم better-i18n إلى تخزين Cloudflare R2.
توصيل عبر CDN الحافة
تُقدَّم حزم الترجمة من مواقع edge عالمية بأوقات تحميل أقل من 50ms.
العرض من جانب الخادم
تجلب مكونات خادم Next.js الترجمات عند وقت الطلب عبر getMessages() لعرض HTML متوافق مع محركات البحث.
ترطيب العميل
يُرطّب BetterI18nProvider الترجمات من جانب العميل دون أي تحول في التخطيط. يتيح useSetLocale() التبديل الفوري.
يخزّن SDK بيانات المانيفست لمدة 5 دقائق وترجمات الرسائل لمدة 30 ثانية افتراضياً. يحدث إبطال التخزين المؤقت تلقائياً عند النشر.
واجهات SDK المستخدمة في هذا القالب
مرجع API الكامل| API | النوع | الغرض |
|---|---|---|
createI18n() | Config | تهيئة SDK بإعدادات المشروع |
i18n.betterMiddleware() | Server | كشف اللغة من URL أو الكوكيز أو Accept-Language |
i18n.getMessages(locale) | Server | تحميل جميع الترجمات للغة معينة |
i18n.getLocales() | Server | جلب اللغات المتاحة من CDN |
BetterI18nProvider | Client | سياق React للترجمات |
useTranslations(ns) | Client | وصول آمن للترجمات بالنوع |
useSetLocale() | Client | تبديل اللغة فورياً |
useManifestLanguages() | Client | اكتشاف اللغات الديناميكي من CDN |
كيف يعمل
تتم إدارة الترجمات في لوحة better-i18n وتسليمها عبر CDN. يكتشف البرنامج الوسيط لغة المستخدم من URL أو الكوكي أو لغة المتصفح. تُحمَّل الرسائل من جانب الخادم وتُمرَّر إلى BetterI18nProvider لمكونات العميل.
اللغات المتاحة
يتم جلب هذه اللغات من CDN وقت البناء باستخدام i18n.getLocales() — واجهة API من جانب الخادم.
إدارة اللغات من لوحة تحكم better-i18n.