التوجيه المبني على اللغة

إعداد التوجيه المبني على اللغة في Next.js (App Router)

المشكلة

عنوان URL واحد، مثل /about، يكون غامضاً بطبيعته عندما يدعم التطبيق لغات متعددة. يتلقى المستخدمون الذين يزورون عنوان URL هذا محتوى بلغة افتراضية، لكن ليس لديهم طريقة للربط أو حفظ إصدار من تلك الصفحة بلغة مختلفة. يُربك هذا الغموض محركات البحث، التي قد لا تفهرس جميع إصدارات اللغات أو قد تخلط بينها.

الحل

قم بدمج معرّف اللغة مباشرة في مسار URL، مثل /en/about أو /fr/about. يجعل هذا كل مسار فريداً للغة معينة، مما يحل الغموض لكل من المستخدمين ومحركات البحث.

الخطوات

1. إنشاء مقطع لغة ديناميكي

في Next.js App Router، تتعامل مع توجيه اللغة من خلال إنشاء مجلد مقطع ديناميكي في جذر دليل app الخاص بك. أنشئ مجلداً جديداً باسم [lang] داخل app وانقل ملف page.tsx الرئيسي إليه.

// app/[lang]/page.tsx

export default function Home({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Home page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

يلتقط مجلد [lang] هذا الجزء الأول من عنوان URL (مثل 'en' أو 'fr') ويمرره كخاصية lang داخل كائن params إلى مكون الصفحة الخاص بك. يمكنك الآن الوصول إلى صفحتك على عناوين URL مثل /en أو /fr.

2. تحديث التخطيط الجذري

يجب أيضاً نقل layout.tsx الجذري داخل مجلد app/[lang]. سيتلقى أيضاً معامل lang، والذي يجب عليك استخدامه لتعيين سمة lang على وسم <html> لإمكانية الوصول وتحسين محركات البحث.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

يقوم هذا التخطيط الآن بتغليف جميع الصفحات ضمن لغة محددة. يؤدي تعيين سمة lang هنا إلى إعلام المتصفحات باللغة التي يُكتب بها محتوى الصفحة.

3. تحديد اللغات المدعومة

لإخبار Next.js بأجزاء اللغة الصالحة، يمكنك تصدير دالة generateStaticParams من التخطيط الجذري. يتيح ذلك لـ Next.js إنشاء هذه المسارات بشكل ثابت في وقت البناء.

// app/[lang]/layout.tsx

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

تُعلم هذه الدالة Next.js بأن تطبيقك يدعم /en و/es و/fr. ستؤدي الطلبات إلى مسارات أخرى (مثل /de) إلى صفحة 404 غير موجودة.

4. إضافة مسارات متداخلة

يتم الآن إنشاء جميع الصفحات الأخرى في تطبيقك داخل مجلد [lang]. على سبيل المثال، لإنشاء صفحة 'حول'، ستضيف app/[lang]/about/page.tsx.

// app/[lang]/about/page.tsx

export default function AboutPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>About page</h1>
      <p>Current language: {params.lang}</p>
    </div>
  );
}

ينشئ هذا الملف تلقائيًا مسارات يمكن الوصول إليها عند /en/about و/es/about و/fr/about. تتوفر معلمة lang في جميع الصفحات إذا كنت بحاجة إليها لجلب المحتوى المترجم الصحيح.