كيفية اكتشاف تفضيلات لغة المستخدم في React Router v7

المشكلة

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

الحل

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

الخطوات

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

ترويسة Accept-Language لها تنسيق محدد مع قيم جودة تتطلب تحليلًا دقيقًا. استخدم مكتبة مخصصة للتعامل مع هذا بشكل صحيح.

npm install accept-language-parser

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

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

إنشاء ملف مساعد يسرد اللغات التي يدعمها تطبيقك ويحدد اللغة الافتراضية للرجوع إليها.

export const supportedLocales = ["en", "fr", "de", "es", "ja"] as const;

export const defaultLocale = "en";

export type Locale = (typeof supportedLocales)[number];

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

3. إنشاء مساعد لاكتشاف اللغة المحلية

قم ببناء دالة تأخذ قيمة رأس Accept-Language وتعيد اللغة المحلية المدعومة الأكثر تطابقاً.

import parser from "accept-language-parser";
import { supportedLocales, defaultLocale, type Locale } from "./locales";

export function detectLocale(acceptLanguageHeader: string | null): Locale {
  if (!acceptLanguageHeader) {
    return defaultLocale;
  }

  const languages = parser.parse(acceptLanguageHeader);

  for (const lang of languages) {
    const code = lang.code.toLowerCase();
    if (supportedLocales.includes(code as Locale)) {
      return code as Locale;
    }
  }

  return defaultLocale;
}

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

4. تكوين مسار الفهرس الجذر

أضف مسار فهرس إلى تكوين المسارات الخاص بك والذي سيتعامل مع الطلبات إلى المسار الجذر.

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/index.tsx"),
  route(":locale", "routes/locale-root.tsx", []),
] satisfies RouteConfig;

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

5. تنفيذ محمّل مسار الفهرس مع اكتشاف اللغة

قم بإنشاء وحدة مسار الفهرس التي تقرأ رأس Accept-Language وتعيد التوجيه إلى مسار اللغة المحلية المناسب.

import { redirect } from "react-router";
import type { Route } from "./+types/index";
import { detectLocale } from "~/utils/detect-locale";

export async function loader({ request }: Route.LoaderArgs) {
  const acceptLanguage = request.headers.get("Accept-Language");
  const locale = detectLocale(acceptLanguage);
  return redirect(`/${locale}`);
}

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