كيفية تعيين لغة المستند في Next.js (Pages Router) الإصدار 16

تحديد لغة الصفحة للمتصفحات وقارئات الشاشة

المشكلة

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

الحل

قم بتعيين سمة lang على عنصر <html> الجذر لتحديد اللغة الأساسية للصفحة. في Next.js Pages Router، يتم ذلك عن طريق إنشاء مكون Document مخصص يغلف بنية HTML للتطبيق. تقبل سمة lang رمز لغة قياسي يخبر المتصفحات والتقنيات المساعدة ومحركات البحث باللغة التي يستخدمها المحتوى، مما يتيح النطق الصحيح وعروض الترجمة المناسبة والفهرسة الدقيقة.

الخطوات

1. إنشاء ملف مستند مخصص

قم بإنشاء ملف باسم _document.js (أو _document.tsx لـ TypeScript) في دليل pages الخاص بك. يتيح لك هذا الملف تخصيص بنية مستند HTML التي تغلف كل صفحة في تطبيقك.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

يقبل مكون Html من next/document خاصية lang التي تعين سمة اللغة على عنصر HTML الجذر. استبدل "en" برمز لغة المحتوى الخاص بك.

2. استخدام رمز اللغة المناسب

تتبع رموز اللغة تنسيق معيار UTS Locale Identifiers: language-region-script، حيث تكون المنطقة والنص اختيارية. في معظم الحالات، استخدم رمز اللغة المكون من حرفين ISO 639-1.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="fr">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

تتضمن الأمثلة الشائعة "en" للإنجليزية، و"es" للإسبانية، و"fr" للفرنسية، و"de" للألمانية، و"ja" لليابانية. يمكنك تضمين المتغيرات الإقليمية مثل "en-US" أو "en-GB" عند الحاجة.

3. تعيين اللغة الديناميكية بناءً على اللغة المحلية

إذا كان تطبيقك يدعم لغات محلية متعددة من خلال توجيه i18n في Next.js، فيمكنك الوصول إلى اللغة المحلية الحالية من سياق الموجه لتعيين اللغة ديناميكيًا.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

عند استخدام تكوين i18n المدمج في Next.js، يوفر الإطار تلقائيًا اللغة المحلية ويحدث سمة lang. تكون الخاصية locale متاحة على مكون Document عند تكوين i18n في next.config.js.