كيفية اكتشاف تفضيلات لغة المستخدم في 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 من الطلب، ويحدد أفضل لغة، ويعيد توجيههم إلى المسار الجذر لتلك اللغة، مما يضمن رؤيتهم للمحتوى بلغتهم المفضلة من أول تحميل للصفحة.