كيفية تنفيذ التوجيه المعتمد على اللغة في Next.js (Pages Router) v16

المشكلة

عند بناء تطبيق متعدد اللغات، يشكل قرار أساسي واحد كل شيء آخر: كيف سيعرف التطبيق اللغة التي يجب عرضها؟ بدون آلية صريحة، يصبح عنوان URL /about غامضاً—يمكن أن يمثل محتوى بأي لغة. لا يستطيع المستخدمون مشاركة روابط لإصدارات لغوية محددة، وتواجه محركات البحث صعوبة في فهم أي إصدار ينتمي إلى أي جمهور. يخلق هذا الغموض مشاكل لكل من تجربة المستخدم وتحسين محركات البحث، حيث لا توجد طريقة واضحة لتحديد أو وضع إشارة مرجعية للمحتوى بلغة معينة.

الحل

ضع معرف اللغة مباشرة في مسار URL من خلال تكوين دعم التوجيه i18n المدمج في Next.js. قم بتعريف اللغات التي تريد دعمها واللغة الافتراضية في تكوين Next.js الخاص بك. سيتعامل Next.js تلقائياً مع التوجيه، مما يجعل المسارات مثل /fr/about و /nl-NL/about متاحة، بينما لا تحتوي اللغة الافتراضية على بادئة. هذا يجعل كل مسار فريداً للغة معينة، مما يزيل الغموض لكل من المستخدمين ومحركات البحث.

الخطوات

1. إضافة تكوين i18n إلى next.config.js

أضف تكوين i18n إلى ملف next.config.js الخاص بك لتعريف اللغات التي يدعمها تطبيقك.

module.exports = {
  i18n: {
    locales: ["en-US", "fr", "nl-NL"],
    defaultLocale: "en-US",
  },
};

اللغات هي معرفات UTS Locale Identifiers، وهي صيغة موحدة لتعريف اللغات، تتكون عموماً من لغة ومنطقة ونص مفصولة بشرطة. يتم استخدام defaultLocale عند زيارة مسار بدون بادئة لغة.

2. الوصول إلى معلومات اللغة في الصفحات

استخدم خطاف useRouter() للوصول إلى معلومات اللغة في مكونات الصفحة الخاصة بك.

import { useRouter } from "next/router";

export default function AboutPage() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

تحتوي خاصية locale على اللغة النشطة حاليًا، وتحتوي locales على جميع اللغات المُكوَّنة، وتحتوي defaultLocale على اللغة الافتراضية المُكوَّنة.

3. الوصول إلى اللغة في دوال جلب البيانات

عند العرض المسبق للصفحات باستخدام getStaticProps أو getServerSideProps، يتم توفير معلومات اللغة في السياق.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const { locale } = context;

  const messages = await import(`../messages/${locale}.json`);

  return {
    props: {
      messages: messages.default,
    },
  };
};

يتيح لك هذا تحميل البيانات الخاصة باللغة في وقت البناء أو وقت الطلب بناءً على اللغة النشطة.

4. الربط بين اللغات

استخدم next/link مع خاصية locale للانتقال إلى لغة مختلفة.

import Link from "next/link";

export default function LanguageSwitcher() {
  return (
    <nav>
      <Link href="/about" locale="en-US">
        English
      </Link>
      <Link href="/about" locale="fr">
        Français
      </Link>
      <Link href="/about" locale="nl-NL">
        Nederlands
      </Link>
    </nav>
  );
}

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

5. إنشاء مسارات ثابتة لجميع اللغات

عند استخدام getStaticPaths، يتم توفير اللغات المُكوَّنة في معامل السياق تحت locales واللغة الافتراضية المُكوَّنة تحت defaultLocale.

import { GetStaticPaths } from "next";

export const getStaticPaths: GetStaticPaths = async (context) => {
  const { locales } = context;

  const paths = locales.flatMap((locale) => [
    { params: { slug: "getting-started" }, locale },
    { params: { slug: "advanced" }, locale },
  ]);

  return {
    paths,
    fallback: false,
  };
};

يضمن هذا العرض المسبق لجميع إصدارات اللغات من صفحاتك الديناميكية في وقت البناء.