كيفية تذكر اختيار اللغة عبر الجلسات في Next.js (موجه الصفحات) الإصدار 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",
  },
};

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