كيفية اكتشاف تفضيلات لغة المستخدم في Next.js (Pages Router) v16

المشكلة

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

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

الحل

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

يستفيد هذا النهج من دالة 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;
  }
}

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