التوجيه المستند إلى اللغة

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

المشكلة

عنوان 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 متاحة في جميع الصفحات إذا كنت بحاجة إليها لجلب المحتوى المترجم الصحيح.