كيفية تنفيذ التوجيه المستند إلى اللغة في Next.js (موجه الصفحات) الإصدار 16

المشكلة

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

الحل

ضع معرّف اللغة مباشرة في مسار 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، وهي تنسيق موحد لتحديد اللغات، وتتكون عمومًا من لغة ومنطقة ونص مفصولة بشرطة. يتم استخدام 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,
  };
};

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