بناء موقع متعدد اللغات باستخدام next-intl: إعداداتي بعد 3 مشاريع

في الأسبوع الماضي، كنت أراجع تحليلات Tawasul Limo - وهي منصة لخدمات السيارات الفاخرة قمت ببنائها لعملاء في أبو ظبي - ولاحظت أن 43٪ من حجوزاتهم تأتي من خلال الواجهة العربية. هذا الرقم كان سيصبح ضربًا من الخيال بدون ترجمة مناسبة. قبل ثلاث سنوات، كانت محاولتي الأولى لإنشاء مواقع React متعددة اللغات أشبه بمصارعة ثعبان في الظلام. اليوم، next-intl هو الحل الأمثل بالنسبة لي لمشاريع اللغة الإنجليزية/العربية، وإليك السبب.

إعداد next-intl: الأشياء المملة الضرورية

أبدأ كل مشروع بتشغيل npm install next-intl. قدم الإصدار 3.6.0 تحميل الترجمة من جانب الخادم، مما وفر لي ساعات من تصحيح أخطاء عدم تطابق التجميع - وهو نعمة للعملاء الذين يرغبون في تحديث الترجمات دون إعادة النشر.

جوهر إعدادي موجود في /public/locales. أقوم بهيكلة المجلدات حسب اللغة (en, ar) مع ملفات JSON مسطحة لكل صفحة لتجنب الفوضى المتداخلة. مثال للصفحة الرئيسية:

•public/locales/en/index.json
•public/locales/ar/index.json

في next.config.js، أقوم بتعيين اللغات المدعومة واللغة الافتراضية بشكل صريح:

javascript

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
  },
}

أتخطى بادئة التوجيه المضمنة في Next.js (/ar/about) لصالح النطاقات الفرعية (ar.example.com) لتحسين محركات البحث باللغة العربية. يتطلب هذا الإعداد تكوين DNS ولكنه يتماشى مع الطريقة التي يتوقع بها المستخدمون المقيمون في الخليج تبديل اللغة. مزيد من التفاصيل في مقالتي عن تحسين محركات البحث باللغة العربية.

التعامل مع المسارات الديناميكية و ISR

تواجه عملية إنشاء المواقع الثابتة صعوبات عند ترجمة المسارات الديناميكية. في العام الماضي، أمضيت ليلتين في معرفة سبب استمرار ظهور قوائم Reach Home Properties الخاصة بي برمز 404 باللغة العربية. اتضح أن useTranslations الخاص بـ next-intl لا يعمل أثناء ISR ما لم تقم بتحميل الرسائل مسبقًا. الإصلاح النهائي:

typescript

// pages/[slug].tsx
export async function getStaticProps({ locale, params }) {
  const messages = await loadTranslations(locale, 'details');
  return {
    props: { messages, slug: params.slug },
    revalidate: 60,
  };
}

تحميل الترجمات مسبقًا لكل لغة على الصفحات الديناميكية ليس اختياريًا. إذا فاتك الأمر، فستقوم إصدارات ISR بعرض صفحات فارغة في الإنتاج - اسألني كيف عرفت.

مشاكل وتصحيحات من اليمين إلى اليسار (RTL)

تسبب محاذاة النص العربي في كسر المكون الأول لي في تطبيق Greeny Corner للنباتات. كان النص عالقًا في حالة محاذاة لليسار على الرغم من سمات HTML الصحيحة. الجاني؟ الأنماط الافتراضية لـ Material-UI تتجاوز dir="rtl".

نجحت طريقتان للإصلاح:

فئات CSS منفصلة للغة العربية باستخدام محددات [dir='rtl']
حقن سمة <html dir={rtl ? 'rtl' : 'ltr'}> من جانب الخادم

أقوم بتجميع أنماط RTL في /styles/ar.scss وتحميلها بشكل مشروط. لا توجد مكتبة CSS-in-JS تتعامل مع هذا بشكل نظيف خارج الصندوق، لذا فإن Sass القديم العادي يفوز للتحكم في RTL.

لماذا لا نستخدم خيارات i18n الخاصة بـ Next.js App Router؟

لقد وصلنا لعام 2026 ولا يزال برنامج i18n الوسيط لـ App Router يعاني من مشاكل في الأرقام العربية وتنسيق التاريخ. في لوحة معلومات Tawasul Limo، تسببت تواريخ الحجز بتنسيق التقويم الهجري في حدوث ارتباك حتى قمت بضبط خيارات الترجمة يدويًا:

javascript

useTranslations('common', { locale: 'ar-EG' });

بالنسبة لعملاء دول مجلس التعاون الخليجي، فإن التمسك بالتحكم الدقيق في next-intl يتفوق على مكافحة مشاكل تجميع React Server Components. قد يتغير رأيي في الربع الثالث عندما يتم إسقاط Next 15 - ولكن ليس اليوم.

مشكلة مزعجة حقًا: الأرقام العربية

سأل أحد العملاء في دبي عن سبب ظهور أسعارهم بشكل غريب. ظهرت الأرقام 50 و 100 و 200 على أنها "٥٠, ١٠٠, ٢٠٠" باللغة العربية. تستخدم الكتابة العربية أحرف أرقام مختلفة - وهو أمر نسيته تمامًا.

تم إصلاح ذلك بإضافة مساعدات formatNumber عبر مكونات الأسعار:

import { useTranslations } from 'next-intl';

export default function Price({ value }) {
  const t = useTranslations();
  return <span>{t(`formats.amount`, { value })}</span>;
}

مع ملفات الترجمة المقابلة:

json

// ar/index.json
{
  "formats": {
    "amount": "{value, number} AED"
  }
}

يجبر هذا اللغات المحلية العربية على استخدام الأرقام القياسية 50/100/200 مع الحفاظ على النص الآخر من اليمين إلى اليسار.

الأسئلة الشائعة

هل يمكنني استخدام next-intl مع واجهات برمجة تطبيقات Laravel لمواقع الويب ثنائية اللغة؟

إطلاقا. عند بناء Tawasul Limo، جعلت Laravel تقوم بإرجاع حقول محتوى خاصة باللغة (title_en, title_ar) ثم مررتها إلى loadTranslations. فقط تأكد من أن أعمدة قاعدة البيانات تخزن UTF-8 بشكل صحيح - تحقق من تكوين نص Laravel العربي.

كيف تتعامل محركات البحث مع موقع next-intl المتعدد؟

يحترم Googlebot علامات hreflang ، والتي أضيفها يدويًا إلى <head> لكل لغة. بالنسبة للصفحات العربية:

html

<link rel="alternate" hreflang="ar" href="https://ar.example.com/">

هذا الإعداد هو السبب في أن عملاء العقارات في الإمارات العربية المتحدة يحصلون على تصنيف متساوٍ في كلتا اللغتين - تحقق من دليل تحسين محركات البحث باللغة العربية للحصول على التفاصيل الكاملة.

هل next-intl أبطأ من بدائل مثل linguijs؟

ليس في اختبارات وقت التحميل الخاصة بي. كلاهما يضيف حوالي 30-60 مللي ثانية لكل صفحة اعتمادًا على حجم ملف الترجمة. استخدم تقسيم التعليمات البرمجية وقم بتحميل ترجمات الصفحة الهامة مسبقًا للحفاظ على السرعات ضيقة.

كيفية التعامل مع RTL CSS دون تكرار أوراق الأنماط؟

أستخدم RTL CSS مع PostCSS. يقوم تلقائيًا بإنشاء إصدارات RTL من أنماط LTR الافتراضية. لا مزيد من تحرير ملفين - فقط اكتب مجموعة واحدة ودع البرنامج المساعد يتعامل مع اتجاه المرآة.

إذا كنت تقوم ببناء موقع ثنائي اللغة الإنجليزية والعربية لعملاء في الإمارات العربية المتحدة / دول مجلس التعاون الخليجي وتحتاج إلى تطبيق next-intl مجرب ومختبر، فيجب أن نتحدث. لقد اجتزت المزالق من تصميم RTL إلى توطين الأسعار الديناميكية - احجز استشارة مجانية لمدة 30 دقيقة، أو تواصل إذا كان الموعد النهائي الخاص بك بالأمس.

METADATA:{"excerpt":"Learn how a UAE full-stack dev handles multi-language Arabic/English sites with next-intl after 3 production deployments.","tags":["next-intl","i18n","Arabic-English websites","Next.js localization","multilingual SEO"]}