تعيين لغة المستند

المشكلة

يتم عرض صفحة ويب باللغة الفرنسية، لكن مستند HTML نفسه غير محدد كذلك (على سبيل المثال، <html lang="en">). يتسبب هذا الفشل في الإعلان عن اللغة في محاولة قارئات الشاشة نطق المحتوى الفرنسي باستخدام الصوتيات الإنجليزية. كما يمنع المتصفحات من تقديم الترجمة التلقائية ويؤثر على فهرسة محركات البحث.

الحل

اقرأ معامل lang من عنوان URL في مكون التخطيط الجذري. مرر معامل lang هذا إلى سمة lang الخاصة بعنصر <html>. يعلن هذا صراحةً عن لغة المستند بالكامل للمتصفحات والتقنيات المساعدة.

الخطوات

1. الوصول إلى معامل `lang` في التخطيط الجذري

في Next.js App Router، يتلقى ملف layout.tsx داخل مقطع ديناميكي (مثل [lang]) تلقائيًا قيمة ذلك المقطع كخاصية params.

2. تعيين سمة `lang` على عنصر `<html>`

عدّل ملف app/[lang]/layout.tsx الخاص بك لقبول خاصية params وتطبيق خاصية 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>
  );
}

يضمن هذا أن طلبًا إلى /fr/about ينتج عنه صفحة معروضة تبدأ بـ <html lang="fr">. يُعلم هذا التغيير البسيط بشكل صحيح قارئات الشاشة ومحركات البحث والمتصفحات عن اللغة التي كُتب بها المحتوى.