Next.js Internationalization: Complete i18n Guide with next-intl

Over 75% of internet users prefer browsing in their native language, and businesses that localize see 70% higher conversion rates in non-English markets. Next.js combined with next-intl provides a robust internationalization framework handling routing, translations, formatting, and SEO across any number of locales.

اہم ٹیک ویز

• Next-intl بغیر کسی رکاوٹ کے Next.js ایپ راؤٹر اور سرور کے اجزاء کے ساتھ مربوط ہوتا ہے۔
• لوکل پریفکسڈ روٹنگ انگریزی یو آر ایل کو صاف رکھتی ہے جبکہ دوسری زبانوں کے لیے سابقے شامل کرتی ہے۔
• سرور کے اجزاء کلائنٹ سائیڈ جاوا اسکرپٹ بنڈل اوور ہیڈ کے بغیر ترجمہ لوڈ کرتے ہیں۔
• بین الاقوامی SEO کے لیے مناسب hreflang ٹیگز اور کثیر لسانی سائٹ کے نقشے ضروری ہیں۔

---

پروجیکٹ سیٹ اپ

Next-intl انسٹال کریں اور اپنے پروجیکٹ کو ایک i18n ڈائریکٹری کے ساتھ منظم کریں جس میں routing.ts، navigation.ts، اور request.ts شامل ہوں۔ ایپ راؤٹر میں اپنی ایپ کو [locale] کے نیچے رکھیں۔ ترجمہ JSON فائلوں کو پروجیکٹ روٹ پر پیغامات کی ڈائرکٹری میں اسٹور کریں۔

روٹنگ کنفیگریشن

روٹنگ کی وضاحت defineRouting() کے ساتھ کریں جس میں آپ کے لوکیلز کی صف، ڈیفالٹ لوکیل، اور لوکیل پریفکس حکمت عملی کی وضاحت کریں۔ "ضرورت کے مطابق" حکمت عملی پہلے سے طے شدہ لوکیل (انگریزی) کے سابقہ ​​کو چھوڑ دیتی ہے جبکہ دوسروں کے لیے /es/، /fr/، /ar/ سابقے شامل کرتے ہیں۔

تخلیق نیویگیشن (روٹنگ) کے ساتھ نیویگیشن ریپرز بنائیں تاکہ لوکل سے آگاہ لنک، UseRouter، UsePathname، اور ری ڈائریکٹ فنکشنز حاصل کریں۔ اپنی پوری ایپ میں Next.js مقامی نیویگیشن کے بجائے ان کا استعمال کریں۔

مڈل ویئر سیٹ اپ

Next.js 16 میں، proxy.ts فائل بنائیں (پرانے Middleware.ts پیٹرن کی جگہ لے کر)۔ createMiddleware(routing) کے ذریعے تخلیق کردہ ایک پراکسی فنکشن برآمد کریں۔ API روٹس، سٹیٹک فائلز، اور _next پاتھز کو خارج کرنے کے لیے میچر کو کنفیگر کریں۔

---

ترجمے کی فائلیں۔

JSON ڈھانچہ (گھوںسلا، فلیٹ نہیں)

نیسٹڈ کیز کا استعمال کریں جو نام کی جگہ کے ذریعہ ترتیب دی گئی ہیں۔ "home.title" جیسی فلیٹ ڈاٹ سے الگ کردہ کلیدیں کبھی استعمال نہ کریں -- وہ نیکسٹ انٹل نیم اسپیس ریزولوشن کو توڑ دیتی ہیں۔ ساخت کے ترجمے بطور:

• عام: مشترکہ اصطلاحات (بٹن، لیبل، لوڈنگ اسٹیٹس)
• nav: نیویگیشن آئٹمز
• ہوم: ہوم پیج کا مواد
• کے بارے میں: صفحہ کے مواد کے بارے میں
• admin.common: مشترکہ منتظم کی شرائط
• admin.products: پروڈکٹ مینجمنٹ صفحہ

سرور کے اجزاء

async سرور کے اجزاء میں getTranslations("namespace") استعمال کریں۔ یہ صفر کلائنٹ بنڈل اثر کے ساتھ سرور پر ترجمہ لوڈ کرتا ہے۔ سٹرنگ ترجمہ کے لیے t("key") کو کال کریں، t.rich("key", { bold: (chunks) => ... }) کو بھرپور متن کے لیے کال کریں۔

کلائنٹ کے اجزاء

کلائنٹ کے اجزاء میں UseTranslations("namespace") ہک کا استعمال کریں جس کا نشان "کلائنٹ استعمال کریں" کے ساتھ ہے۔ ہک ایک ہی t() فنکشن فراہم کرتا ہے۔ کلائنٹ بنڈل میں صرف فعال نام کی جگہ کے ترجمے شامل ہیں۔

---

RTL (دائیں سے بائیں) سپورٹ

عربی، عبرانی، اردو اور دیگر RTL زبانوں کے لیے، موجودہ لوکیل کی بنیاد پر HTML عنصر پر dir="rtl" سیٹ کریں۔ لوکل لے آؤٹ میں، چیک کریں کہ آیا لوکیل آپ کے rtlLocales صف میں ہے اور اس کے مطابق سمت متعین کریں۔

RTL موڈ میں خود بخود پلٹ جانے والی لے آؤٹس کے لیے Tailwind CSS منطقی خصوصیات (pl, pr, ml, mr کی بجائے ps, pe, ms, me) استعمال کریں۔ RTL اسکرپٹ کے لیے مناسب فونٹس لوڈ کریں (مثال کے طور پر، نوٹو سنز عربی برائے عربی اور اردو)۔

---

SEO: میٹا ڈیٹا اور Hreflang

متحرک میٹا ڈیٹا

ہر صفحہ کو generateMetadata() (کبھی بھی سٹیٹک ایکسپورٹ کانسٹ میٹا ڈیٹا نہیں) استعمال کرنا چاہیے تاکہ لوکل سے آگاہ عنوانات، وضاحتیں، اور hreflang متبادلات ہوں۔ ایک alternates.languages ​​آبجیکٹ بنائیں جو ہر لوکیل کو اس کے URL کے راستے پر نقشہ بناتا ہے، نیز انگریزی ورژن کی طرف اشارہ کرنے والا ایک x-default اندراج۔

کثیر لسانی سائٹ کا نقشہ

ہر مقام کے ہر صفحے کے لیے سائٹ کے نقشے کے اندراجات تیار کریں۔ ہر اندراج میں alternates.languages ​​شامل ہونا چاہیے جو تمام مقامی قسموں کی نقشہ سازی کرتی ہے۔ یہ سرچ انجنوں کو ہر مارکیٹ میں درست زبان کا ورژن پیش کرنے کے قابل بناتا ہے۔

مواد کی زبان کا میٹا ٹیگ

سرچ انجنوں اور AI کرالر کو صفحہ کی زبان کی شناخت کرنے میں مدد کرنے کے لیے اپنے مقامی لے آؤٹ میں مواد کی زبان کا میٹا ٹیگ سیٹ کریں۔ یہ خاص طور پر Bing اور ابھرتے ہوئے AI سرچ انجنوں کے لیے اہم ہے۔

---

ترجمہ ورک فلو

1. تمام ترجمے کے قابل تاروں کے لیے سچائی کے واحد ذریعہ کے طور پر en.json** میں ترمیم کریں۔
2. تمام لوکل فائلوں میں نئی ​​کلیدوں کو پھیلانے کے لیے **ٹرانسلیشن اسکرپٹ کو چلائیں (ابتدائی مسودوں کے لیے Google Translate API یا DeepL کا استعمال کرتے ہوئے)
3. معیار اور ثقافتی مناسبیت کے لیے مقامی بولنے والوں کے ساتھ **ترجمے کا جائزہ لیں۔
4. RTL زبانوں کی اچھی طرح جانچ کریں -- لے آؤٹ فلپنگ، ٹیکسٹ الائنمنٹ، اور فارم ان پٹ چیک کریں
5. **Hreflang validator ٹولز اور Google Search Console بین الاقوامی ہدف بندی کے ساتھ ** SEO کی تصدیق کریں

بڑی ترجمے کی فائلوں کو ہینڈل کرنا

5,000+ ترجمے کی کلیدوں والی ایپلیکیشنز کے لیے، JSON فائلوں کو نام کی جگہ کے ذریعے ترتیب دیں تاکہ دیکھ بھال کو بہتر بنایا جا سکے۔ Next-intl کارکردگی کو بہترین رکھتے ہوئے صرف موجودہ صفحہ کے لیے درکار نام کی جگہیں لوڈ کرتا ہے۔

---

کارکردگی کے تحفظات

• سرور رینڈرنگ: سرور پر ترجمہ لوڈ ہوتا ہے۔ کوئی ترجمہ JSON کلائنٹ کو نہیں بھیجا جاتا ہے جب تک کہ جزو کلائنٹ کا جزو نہ ہو۔
• نام کی جگہ کی تقسیم: فی صفحہ صرف فعال نام کی جگہیں لوڈ ہوتی ہیں، پوری ترجمہ فائل نہیں۔
• سٹیٹک جنریشن: getTranslations() کا استعمال کرتے ہوئے صفحات کو تمام لوکلز کے لیے تعمیراتی وقت پر جامد طور پر بنایا جا سکتا ہے۔
• بنڈل سائز: کلائنٹ کے اجزاء میں صرف ان کے نام کی جگہ کے ترجمے شامل ہیں۔ یوز ٹرانسلیشنز ("ہوم") کا استعمال کرنے والا صفحہ صرف "ہوم" نام کی جگہ بھیجتا ہے۔

---

عام نقصانات

1. فلیٹ کیز: نیسٹڈ { "home": { "title": "..." } } کی بجائے "home.title" کو بطور کلید استعمال کرنے سے نام کی جگہ کی ریزولوشن ٹوٹ جاتی ہے۔
2. Missing translations: Always provide fallback behavior -- next-intl shows the key name if a translation is missing, but this looks broken to users
3. ہارڈ کوڈ شدہ تار: ترجمہ کے نظام سے باہر کسی بھی تار کے لیے اپنے کوڈ بیس کا آڈٹ کریں۔
4. تاریخ/نمبر فارمیٹنگ: مستقل رویے کے لیے toLocaleDateString() کے بجائے اگلے-intl فارمیٹرز کا استعمال کریں
5. جامد میٹا ڈیٹا: generateMetadata() کے بجائے ایکسپورٹ کانسٹ میٹا ڈیٹا استعمال کرنے سے لوکل سے آگاہ عنوانات اور تفصیل کو روکتا ہے

---

اکثر پوچھے گئے سوالات

سوال: اگلی-انٹل کتنی لوکل کو سنبھال سکتی ہے؟

کوئی عملی حد نہیں ہے۔ 11+ لوکیلز اور 7,000+ ترجمہ کیز والی ایپلیکیشنز کارکردگی کے مسائل کے بغیر چلتی ہیں۔ سرور سائیڈ رینڈرنگ کا مطلب ہے کہ ترجمے کلائنٹ کے بنڈلوں کو نہیں بناتے۔

س: کیا i18n صفحہ لوڈ کرنے کی کارکردگی کو متاثر کرتا ہے؟

سرور کے اجزاء کے ساتھ، ترجمہ کی لوڈنگ سرور پر ہوتی ہے۔ کارکردگی کا اثر نہ ہونے کے برابر ہے۔ کلائنٹ کے اجزاء میں صرف ان کے نام کی جگہ کے ترجمے شامل ہوتے ہیں، عام طور پر چند KB۔

سوال: ہم متعدد زبانوں میں متحرک ڈیٹا بیس کے مواد کو کیسے ہینڈل کرتے ہیں؟

جامد UI متن JSON فائلوں کا استعمال کرتا ہے۔ ڈیٹا بیس کے مواد (بلاگ پوسٹس، پروڈکٹ کی تفصیل) کے لیے ترجمے کو وقف شدہ کالموں یا ٹیبلز میں اسٹور کرنے، یا بلٹ ان ٹرانسلیشن ورک فلو کے ساتھ CMS استعمال کرنے کی ضرورت ہوتی ہے۔ کچھ ٹیمیں ہائبرڈ استعمال کرتی ہیں: UI کے لیے JSON، مواد کے لیے ڈیٹا بیس۔

س: نمبر اور تاریخ کی فارمیٹنگ کے بارے میں کیا خیال ہے؟

نیکسٹ-انٹل نمبرز، کرنسیوں، تاریخوں اور متعلقہ اوقات کی لوکل آگاہی فارمیٹنگ کے لیے useFormatter() فراہم کرتا ہے۔ تمام فارمیٹنگ Intl معیار کی پیروی کرتی ہے اور خود بخود مقامی کنونشن کا احترام کرتی ہے۔

---

آگے کیا ہے۔

انٹرنیشنلائزیشن ایک ایسی سرمایہ کاری ہے جو ہر غیر انگریزی مارکیٹ میں منافع کی ادائیگی کرتی ہے۔ اپنے سب سے زیادہ قیمت والے مقامات کے ساتھ شروع کریں اور وہاں سے پھیلائیں۔

ECOSIRE سے i18n نفاذ میں مدد کے لیے رابطہ کریں، یا کثیر لسانی ERP تعیناتی کے لیے ہماری Odoo نفاذ کی خدمات کو دریافت کریں۔

---

ECOSIRE کے ذریعہ شائع کیا گیا -- انٹرپرائز سوفٹ ویئر کے حل کے ساتھ کاروبار کو پیمانے میں مدد کرنا۔