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

المشكلة

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

الحل

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

الخطوات

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

في موجه التطبيق Next.js، يتلقى ملف 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">. هذا التغيير البسيط يُعلم قارئات الشاشة ومحركات البحث والمتصفحات بشكل صحيح باللغة التي كُتب بها المحتوى.