- بواسطة x32x01 ||
من ضمن الـ Libraries الجميلة >> هى مكتبة Next-Intl .. تعالى اقولك ايه هي وازاي تستخدمها وتستفيد منها 
Next-Intl مسؤولة عن ترجمة الموقع لاكثر من لغة بشكل كويس جدا وف نفس الوقت سلس ومتوافقة مع ال next كويس
غير إنها بتقدملك :
سهولة في إدارة النصوص المترجمة باستخدام ملفات JSON.
أداء عالي لإن الترجمة بتحصل على مستوى السيرفر.
🛠 دعم كامل للـ TypeScript عشان كتابة الكود تكون منظمة وآمنة.
تبديل اللغات ديناميكياً بسهولة ومنغير ماتحتاج تعمل ريفرش.
اعمل ملفات JSON لكل لغة عايز تضيفها، وحط فيها النصوص المترجمة زي العناوين والرسائل اللي بتظهر في المشروع 
.
عدّل في ملف next.config.mjs وضيف plugin مكتبة next-intl عشان تربط الترجمة مع المشروع 
.
جهّز ملف i18n/request.ts عشان تحدد لغة المستخدم بناءً على بيانات زي الـ cookies أو الـ headers 
.
في ملف layout.tsx، استخدم NextIntlClientProvider عشان تمرر الترجمة للصفحات، وتضبط لغة المشروع بالكامل 
.
استخدم الترجمة في الصفحات بسهولة باستخدام hook بسيط يخليك تستدعي النصوص المترجمة مباشرةً 
.
كده تكون فعلت الترجمة وخلّيت مشروعك يدعم أكتر من لغة بسهولة!
سؤال بقى: ليه ممكن تختار تشغل الترجمة محليًا بدل ما تعتمد على خدمات زي Google CDN؟
Next-Intl مسؤولة عن ترجمة الموقع لاكثر من لغة بشكل كويس جدا وف نفس الوقت سلس ومتوافقة مع ال next كويس
غير إنها بتقدملك :
سهولة في إدارة النصوص المترجمة باستخدام ملفات JSON. أداء عالي لإن الترجمة بتحصل على مستوى السيرفر.🛠 دعم كامل للـ TypeScript عشان كتابة الكود تكون منظمة وآمنة.
تبديل اللغات ديناميكياً بسهولة ومنغير ماتحتاج تعمل ريفرش.طيب هي ازاى next-intl بتشتغل اصلا ؟
- بتجهز ملفات JSON لكل لغة بتحتوي على النصوص المترجمة، وبتنظمها بناءً على اللغة أو الأقسام.
- وأثناء بناء الصفحة، المكتبة بتتعامل مع ملفات الترجمة وتحمل النصوص المناسبة بناءً على اللغة اللي المستخدم مختارها.
- بتدعم تغيير اللغة بسهولة في الوقت الفعلي من خلال تبديل الرسائل المُحملة دون الحاجة لإعادة تحميل الصفحة.
- الدمج مع التطبيق من خلال إضافة Provider في المشروع، النصوص بتكون متاحة في كل جزء من التطبيق بشكل سهل ومنظم.
- بتستخدم وظيفة ترجمة بسيطة بتديك النصوص المناسبة بناءً على اللغة الحالية .. اللى هى useTranslations()
- طريقة تشغيلها ف البروجكت هشرحها كتابة ف البوست دلوقتى وموجودة ككود في الصور فى الأسفل
اعمل ملفات JSON لكل لغة عايز تضيفها، وحط فيها النصوص المترجمة زي العناوين والرسائل اللي بتظهر في المشروع . عدّل في ملف next.config.mjs وضيف plugin مكتبة next-intl عشان تربط الترجمة مع المشروع . جهّز ملف i18n/request.ts عشان تحدد لغة المستخدم بناءً على بيانات زي الـ cookies أو الـ headers . في ملف layout.tsx، استخدم NextIntlClientProvider عشان تمرر الترجمة للصفحات، وتضبط لغة المشروع بالكامل . استخدم الترجمة في الصفحات بسهولة باستخدام hook بسيط يخليك تستدعي النصوص المترجمة مباشرةً . كده تكون فعلت الترجمة وخلّيت مشروعك يدعم أكتر من لغة بسهولة!سؤال بقى: ليه ممكن تختار تشغل الترجمة محليًا بدل ما تعتمد على خدمات زي Google CDN؟