كيفية ترجمة بيانات الصفحة التعريفية في React Router v7

المشكلة

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

الحل

ترجمة بيانات وصف الصفحة لتتطابق مع اللغة الحالية عن طريق تصدير دالة meta من وحدة المسار الخاصة بك. استخدم واجهة برمجة التطبيقات formatMessage من react-intl مع واصفات الرسائل لترجمة سلاسل العنوان والوصف، مما يضمن استخدام البيانات الوصفية لنفس موارد الترجمة مثل محتوى الصفحة. هذا يحافظ على اتساق كل شيء بين ما يظهر في علامات تبويب المتصفح، ونتائج البحث، والصفحة نفسها.

الخطوات

1. إنشاء مساعد للوصول إلى intl خارج المكونات

يوفر كائن intl دالة formatMessage ويمكن الوصول إليه عبر خطاف useIntl في المكونات أو إنشاؤه مباشرة باستخدام createIntl في بيئات غير React. نظرًا لأن دالة meta تعمل خارج شجرة مكونات React، قم بإنشاء مساعد يبني نسخة intl من رسائلك.

import { createIntl, createIntlCache } from "react-intl";

const cache = createIntlCache();

export function createIntlForLocale(
  locale: string,
  messages: Record<string, string>,
) {
  return createIntl(
    {
      locale,
      messages,
    },
    cache,
  );
}

يقوم هذا المساعد بإنشاء نسخة intl يمكنها تنسيق الرسائل في أي دالة، وليس فقط مكونات React.

2. تحميل الرسائل في محمّل المسار الأصلي

تقوم محمّلات المسارات بإرجاع البيانات التي تصل إليها المكونات عبر خصائص loaderData. قم بتحميل رسائل الترجمة الخاصة بك في مسار رئيسي حتى تكون متاحة للمسارات الفرعية.

import type { Route } from "./+types/root";

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);
  const locale = url.pathname.split("/")[1] || "en";

  const messages = await import(`../translations/${locale}.json`);

  return {
    locale,
    messages: messages.default,
  };
}

تتلقى دالة meta معلمة matches تحتوي على بيانات المحمّل من جميع المسارات المطابقة، مما يجعل بيانات المحمّل الرئيسي متاحة لدوال meta في المسارات الفرعية.

3. تصدير دالة meta التي تترجم البيانات الوصفية

قم بتصدير دالة meta من وحدة المسار الخاصة بك والتي تُرجع مصفوفة من كائنات البيانات الوصفية. قم بالوصول إلى بيانات المحمّل الرئيسي من matches واستخدم مساعد intl لترجمة السلاسل النصية.

import type { Route } from "./+types/product";
import { createIntlForLocale } from "~/utils/intl";

export function meta({ matches }: Route.MetaArgs) {
  const rootMatch = matches.find((match) => match.id === "root");
  const { locale, messages } = rootMatch?.data || {
    locale: "en",
    messages: {},
  };

  const intl = createIntlForLocale(locale, messages);

  return [
    {
      title: intl.formatMessage({
        id: "product.meta.title",
        defaultMessage: "Product Details",
      }),
    },
    {
      name: "description",
      content: intl.formatMessage({
        id: "product.meta.description",
        defaultMessage: "View detailed information about this product",
      }),
    },
  ];
}

تقبل دالة formatMessage واصف رسالة يحتوي على معرّف ورسالة افتراضية، وتُرجع السلسلة المترجمة للغة الحالية.

4. إضافة سلاسل البيانات الوصفية المترجمة إلى ملفات الرسائل الخاصة بك

أضف مفاتيح ترجمة البيانات الوصفية إلى ملف الرسائل الخاص بكل لغة حتى تتمكن formatMessage من العثور عليها.

{
  "product.meta.title": "Détails du produit",
  "product.meta.description": "Voir les informations détaillées sur ce produit"
}

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