كيفية تعيين لغة المستند في Next.js (موجه الصفحات) الإصدار 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 القياسي: 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. تعيين لغة ديناميكية بناءً على الإعدادات المحلية

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

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.