Next-Intl: ترجمة موقعك بسهولة في Next.js

مكتبة Next-Intl بتخليك تضيف ترجمة متعددة اللغات لموقعك بطريقة سلسة ومتوافقة مع Next.js.
غير كده، المكتبة بتمتاز بـ:

• إدارة النصوص المترجمة بسهولة عبر ملفات JSON.
• أداء عالي لأن الترجمة بتتم على مستوى السيرفر.
• دعم كامل للـ TypeScript لكتابة كود منظم وآمن.
• تبديل اللغات ديناميكيًا بدون إعادة تحميل الصفحة (No Refresh Needed).

إزاي Next-Intl بتشتغل؟ ​

1. تجهيز ملفات JSON لكل لغة، تحتوي على النصوص المترجمة وتنظم حسب اللغة أو الأقسام.
2. أثناء بناء الصفحة، المكتبة تختار النصوص المناسبة بناءً على لغة المستخدم.
3. دعم تغيير اللغة بسهولة في الوقت الفعلي بدون إعادة تحميل الصفحة.
4. الدمج مع المشروع عن طريق Provider، بحيث النصوص تكون متاحة في كل أجزاء التطبيق بسهولة.
5. استخدام Hook بسيط useTranslations() لاستدعاء النصوص المترجمة مباشرة في الصفحات.

خطوات إضافة Next-Intl لمشروعك ​

1. إنشاء ملفات JSON لكل لغة عايز تضيفها، وحط فيها النصوص المترجمة: العناوين، الرسائل، الأزرار، إلخ.
2. تعديل ملف next.config.mjs وإضافة plugin الخاص بالمكتبة لربط الترجمة بالمشروع.
3. تجهيز ملف i18n/request.ts لتحديد لغة المستخدم بناءً على بيانات مثل cookies أو headers.
4. في ملف layout.tsx استخدم NextIntlClientProvider لتمرير الترجمة لكل الصفحات وضبط لغة المشروع بالكامل.
5. استخدام Hook الترجمة useTranslations() في أي صفحة أو مكون لاستدعاء النصوص المترجمة مباشرة.

ليه تفضل الترجمة محليًا بدل Google CDN؟ ​

• الأداء أسرع لأن النصوص محملة من السيرفر الخاص بمشروعك.
• خصوصية المستخدم أفضل، مفيش بيانات بتخرج لمزود خارجي.
• مرونة أكبر في إدارة اللغات وتحديث النصوص بدون اعتماد على خدمة خارجية.

باستخدام Next-Intl، هتقدر تخلي مشروعك يدعم أكثر من لغة بسهولة وسلاسة، ويقدم تجربة مستخدم ممتازة لأي زائر من أي بلد