تدويل تطبيقات Next.js باستخدام next-intl

توجيه اللغات وترجمات مُصيَّرة على الخادم وتخطيطات RTL وSEO hreflang دون وميض من جانب العميل.

التدويل (internationalization) متطلب أساسي للتطبيقات التي تخدم جماهير عالمية. في عصر Next.js App Router، برزت مكتبات مثل next-intl كالمعيار de facto لإدارة الترجمات وتوجيه locale وSEO عبر لغات متعددة. يرشدك هذا الدليل عبر أنماط مُثبتة لبناء تطبيقات React متعددة اللغات تؤدي جيدًا وتُصنَّف في محركات البحث وتحترم الاتفاقيات الثقافية بما في ذلك تخطيطات RTL.

مخطط يُظهر بنية توجيه locale مع بادئات اللغة ومسارات المحتوى المترجم — يربط التوجيه المبني على locale كل لغة ببادئة URL، مما يتيح للزواحف والمستخدمين الوصول للمحتوى المترجم مباشرة.

اختيار استراتيجية i18n لـ Next.js

غيّر App Router كيفية تعامل Next.js مع التدويل. لم يعد تكوين i18n المدمج في Pages Router ينطبق، ويجب على الفرق اختيار مكتبة تتكامل مع نموذج التوجيه الجديد. next-intl الأكثر اعتمادًا لأنه يوفر تنسيق رسائل آمن الأنواع وتنقلًا واعيًا باللغة واكتشاف locale عبر middleware جاهزًا.

عند تقييم نهجك، ضع في الاعتبار قرارات معمارية مسبقة:

بنية URL — مبنية على بادئة (/en/about، /de/about) مقابل مبنية على نطاق (en.example.com، de.example.com).
معالجة اللغة الافتراضية — هل تظهر اللغة الافتراضية في URL أم تُستنتج من headers.
تخزين الترجمات — ملفات JSON أو تكامل CMS أو منصة إدارة ترجمات.
سلوك fallback — ماذا يحدث عند غياب مفتاح ترجمة في locale ثانوي.

التوجيه المبني على البادئة هو الافتراضي الموصى به لمعظم التطبيقات. يبقي النشر بسيطًا ويعمل مع static hosting ويمنح محركات البحث إشارات واضحة عن متغيرات اللغة.

إعداد توجيه locale

يستخدم next-intl middleware في Next.js لاكتشاف locale المفضل للمستخدم وإعادة كتابة الطلبات إلى segment locale المناسب. يعمل middleware على edge بزمن ضئيل مع ضمان تقديم كل صفحة باللغة الصحيحة.

// middleware.ts
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";

export default createMiddleware(routing);

export const config = {
  matcher: ["/", "/(de|en|fr|ar)/:path*"],
};

// i18n/routing.ts
import { defineRouting } from "next-intl/routing";

export const routing = defineRouting({
  locales: ["en", "de", "fr", "ar"],
  defaultLocale: "en",
  localePrefix: "always",
});

تعكس بنية app directory تكوين locale. لكل locale segment خاص تحت app/[locale]/، وتغلف layouts مشتركة الصفحات المترجمة بتنقل وتذييل متسقين.

التنقل الواعي باللغة

لا تُثبّت المسارات في الروابط بشكل ثابت. استخدم مساعدات التنقل من next-intl لتوليد URLs مسبوقة بـ locale تلقائيًا. يمنع ذلك روابط معطلة عند إضافة أو إزالة locales ويضمن انتشار سياق locale النشط عبر client-side navigation.

import { Link } from "@/i18n/navigation";

export function NavBar() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/pricing">Pricing</Link>
    </nav>
  );
}

تنظيم رسائل الترجمة

ابنِ بنية ملفات الرسائل لتتوسع مع تطبيقك. JSON مسطح يناسب مشاريع صغيرة، لكن namespaces متداخلة تمنع تعارضات merge وتحسّن الاكتشاف مع نمو الترجمات إلى آلاف.

جمّع الرسائل حسب الميزة أو الصفحة — home.json وcheckout.json وerrors.json.
استخدم أسماء مفاتيح وصفية — checkout.payment.submitButton بدل btn1.
حافظ على اتساق صيغة ICU message format للجمع والاستيفاء.
أنشئ workflow مراجعة مع متحدثين أصليين قبل نشر الترجمات.

حمّل فقط namespaces التي تحتاجها الصفحة لتجنّب إرسال ترجمات غير مستخدمة. next-intl يدعم lazy loading لوحدات الرسائل، مما يبقي أحجام الحزمة الأولية manageable حتى مع عشرات locales.

دعم تخطيط RTL

دعم لغات RTL مثل العربية والعبرية يتطلب أكثر من ترجمة النصوص. اتجاه التخطيط ومحاذاة النص وانعكاس الأيقونات واتجاه الحركة كلها يجب أن تتكيف عند التبديل إلى locale RTL.

اضبط خاصية dir على عنصر HTML الجذر حسب locale النشط:

// app/[locale]/layout.tsx
import { getLocale, getMessages } from "next-intl/server";

const rtlLocales = ["ar", "he", "fa"];

export default async function LocaleLayout({ children, params }) {
  const locale = await getLocale();
  const direction = rtlLocales.includes(locale) ? "rtl" : "ltr";

  return (
    <html lang={locale} dir={direction}>
      <body>{children}</body>
    </html>
  );
}

استخدم CSS logical properties في stylesheet. استبدل margin-left بـ margin-inline-start وpadding-right بـ padding-inline-end وtext-align: left بـ text-align: start. Tailwind CSS v4 يتضمن utilities للخصائص المنطقية (ms-4 وpe-2) تتعامل مع ذلك تلقائيًا.

SEO للمواقع متعددة اللغات

تحتاج محركات البحث إشارات صريحة لفهم علاقات اللغة بين الصفحات. بدون hreflang tags وcanonical URLs صحيحة، تخاطر بعقوبات duplicate content وفهرسة locale خاطئة.

نفّذ أساسيات SEO التالية:

hreflang link tags — أعلن كل متغير لغة لكل صفحة في document head.
Canonical URLs — كل صفحة locale يجب أن تُ canonicalize لنفسها، لا للغة الافتراضية.
Metadata مترجم — title وdescription وOpen Graph tags يجب أن تُ localized، لا تُنسخ من locale الافتراضي.
XML sitemaps — أنشئ sitemaps لكل locale أو sitemap موحد مع hreflang annotations.
Structured data — عولم JSON-LD schema markup لنتائج بحث غنية.

يتكامل next-intl مع Next.js metadata API، مما يتيح تعريف titles وdescriptions خاصة بـ locale في generateMetadata لكل صفحة. ادمج ذلك مع مولّد sitemap يتكرر على locales وroutes لإنتاج تغطية شاملة لمحركات البحث.

الاختبار وضمان الجودة

أخطاء التدويل خفية لأنها تظهر غالبًا فقط في تركيبات locale محددة. مفتاح ترجمة ناقص قد يُعرض كنص خام في الإنتاج. خطأ RTL قد يكسر التنقل في العربية فقط. أضف فحوصات آلية إلى CI pipeline لاكتشاف هذه المشاكل مبكرًا.

تحقق أن كل locales تحتوي نفس مجموعة مفاتيح الترجمة.
شغّل visual regression tests على locales RTL لاكتشاف كسر التخطيط.
اختبر locale detection بتركيبات Accept-Language header متنوعة.
تحقق أن تنسيق التاريخ والأرقام والعملة يحترم اتفاقيات locale.
راجع page weight — تأكد أن تحميل كل رسائل locale لا ينفخ الحزم.

التدويل التزام مستمر، لا مهمة إعداد لمرة واحدة. مع نمو التطبيق، تُدخل الميزات الجديدة نصوصًا جديدة، ويحتاج الحفاظ على parity الترجمات عبر locales إلى انضباط وأدوات. باعتماد next-intl مع توجيه locale منظم ودعم RTL وأفضل ممارسات SEO من البداية، تبني أساسًا يتوسع بسلاسة مع توسع جمهورك عبر اللغات والمناطق.