كيفية اكتشاف تفضيلات لغة المستخدم في Next.js (موجه الصفحات) الإصدار 16

المشكلة

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

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

الحل

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

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

الخطوات

1. تثبيت مكتبة لتحليل ترويسة Accept-Language

يحتوي رأس Accept-Language على قائمة مفصولة بفواصل من رموز اللغات مع قيم جودة اختيارية يجب تحليلها. قم بتثبيت مكتبة محلل للتعامل مع هذا التنسيق.

npm install accept-language-parser

تستخرج هذه المكتبة رموز اللغات ودرجات الجودة من سلسلة الرأس وتعيدها بترتيب الأولوية.

2. إنشاء صفحة جذر مع منطق إعادة توجيه من جانب الخادم

قم بإنشاء ملف pages/index.tsx الذي سيتم توجيهه تلقائيًا إلى الدليل الجذر. استخدم getServerSideProps لإرجاع كائن إعادة توجيه مع وجهة وعلامة دائمة.

import { GetServerSideProps } from "next";
import parser from "accept-language-parser";

const SUPPORTED_LOCALES = ["en", "fr", "es", "de"];
const DEFAULT_LOCALE = "en";

export default function RootPage() {
  return null;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const acceptLanguageHeader = context.req.headers["accept-language"];

  let targetLocale = DEFAULT_LOCALE;

  if (acceptLanguageHeader) {
    const languages = parser.parse(acceptLanguageHeader);

    const matchedLanguage = languages.find((lang) =>
      SUPPORTED_LOCALES.includes(lang.code),
    );

    if (matchedLanguage) {
      targetLocale = matchedLanguage.code;
    }
  }

  return {
    redirect: {
      destination: `/${targetLocale}`,
      permanent: false,
    },
  };
};

تعمل وظيفة getServerSideProps مع كل طلب، حيث تقرأ رأس Accept-Language وتعيد التوجيه إلى مسار اللغة المناسب قبل عرض أي محتوى للصفحة.

3. تحديد اللغات المدعومة

قم بتحديث مصفوفة SUPPORTED_LOCALES لتتطابق مع اللغات التي يدعمها تطبيقك. سيعيد المحلل اللغات بترتيب الجودة، وسيختار الكود أول تطابق.

const SUPPORTED_LOCALES = ["en", "fr", "es", "de", "ja", "zh"];
const DEFAULT_LOCALE = "en";

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

4. التعامل مع الحالات التي لا تحتوي على ترويسة Accept-Language

قد لا تتضمن بعض الطلبات ترويسة Accept-Language. يتحقق الكود من وجود الترويسة ويعود إلى اللغة الافتراضية عندما تكون مفقودة.

if (acceptLanguageHeader) {
  const languages = parser.parse(acceptLanguageHeader);

  const matchedLanguage = languages.find((lang) =>
    SUPPORTED_LOCALES.includes(lang.code),
  );

  if (matchedLanguage) {
    targetLocale = matchedLanguage.code;
  }
}

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