كيفية تذكر اختيار اللغة عبر الجلسات في Next.js (Pages Router) الإصدار 16

المشكلة

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

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

الحل

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

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

الخطوات

1. إنشاء دالة مساعدة لتعيين ملف تعريف ارتباط تفضيل اللغة من جانب العميل

عندما يختار المستخدم لغة، قم بتخزين اختياره في ملف تعريف ارتباط يستمر عبر الجلسات.

export function setLocalePreference(locale: string) {
  const maxAge = 60 * 60 * 24 * 365;
  document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=${maxAge}; SameSite=Lax`;
}

تقوم هذه الدالة بكتابة ملف تعريف ارتباط باسم NEXT_LOCALE مع اللغة المختارة، صالح لمدة عام واحد. يضمن path=/ توفره عبر التطبيق بالكامل، ويوفر SameSite=Lax حماية معقولة ضد CSRF مع السماح بإرسال ملف تعريف الارتباط عند التنقل على المستوى الأعلى.

2. استدعاء الدالة المساعدة عندما يختار المستخدم لغة

قم بدمج الدالة المساعدة في مكون مبدل اللغة الخاص بك بحيث يتم حفظ التفضيل فوراً عند الاختيار.

import { useRouter } from "next/router";
import { setLocalePreference } from "@/lib/locale";

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locales, locale: currentLocale } = router;

  const handleLocaleChange = (newLocale: string) => {
    setLocalePreference(newLocale);
    router.push(router.pathname, router.asPath, { locale: newLocale });
  };

  return (
    <select
      value={currentLocale}
      onChange={(e) => handleLocaleChange(e.target.value)}
    >
      {locales?.map((loc) => (
        <option key={loc} value={loc}>
          {loc.toUpperCase()}
        </option>
      ))}
    </select>
  );
}

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

3. التحقق من التفضيل المخزن في الصفحة الجذرية

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

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const storedLocale = context.req.cookies.NEXT_LOCALE;
  const { locales, defaultLocale } = context;

  if (
    storedLocale &&
    locales?.includes(storedLocale) &&
    storedLocale !== defaultLocale
  ) {
    return {
      redirect: {
        destination: `/${storedLocale}`,
        permanent: false,
      },
    };
  }

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

export default function RootPage() {
  return null;
}

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

4. تكوين توجيه اللغات في Next.js

تأكد من أن next.config.js الخاص بك يحدد اللغات المدعومة بحيث يمكن لمنطق إعادة التوجيه التحقق من صحة التفضيل المخزن.

module.exports = {
  i18n: {
    locales: ["en", "fr", "de", "es"],
    defaultLocale: "en",
  },
};

يُمكّن هذا التكوين نظام التوجيه متعدد اللغات المدمج في Next.js ويجعل locales وdefaultLocale متاحين في getServerSideProps. يستخدم منطق الصفحة الجذرية هذه القيم للتحقق من صحة ملف تعريف الارتباط المخزن وإنشاء وجهة إعادة التوجيه الصحيحة.