كيفية الحفاظ على اللغة المحلية في روابط التنقل في Next.js (موجه الصفحات) الإصدار 16

الحفاظ على اللغة المحلية أثناء التنقل الداخلي

المشكلة

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

الحل

تأكد من أن كل رابط تنقل داخلي يتضمن تلقائيًا اللغة المحلية الحالية من خلال قراءتها من سياق الموجه. يوفر Next.js Pages Router دعمًا مدمجًا للغة المحلية من خلال نظام التوجيه الخاص به، حيث تكون اللغة المحلية النشطة متاحة عبر خطاف useRouter. بشكل افتراضي، يحافظ مكون Link على اللغة المحلية الحالية أثناء انتقالات جانب العميل، ولكن فهم هذا السلوك وتطبيقه باستمرار عبر التطبيق يضمن تنقلًا سلسًا يراعي اللغة المحلية.

الخطوات

1. الوصول إلى اللغة المحلية الحالية من الموجه

يوفر خطاف useRouter المتغيرات locale (اللغة المحلية النشطة حاليًا)، وlocales (جميع اللغات المحلية المكونة)، وdefaultLocale (اللغة المحلية الافتراضية المكونة).

import { useRouter } from "next/router";

export default function Navigation() {
  const router = useRouter();
  const currentLocale = router.locale;

  return (
    <nav>
      <p>Current locale: {currentLocale}</p>
    </nav>
  );
}

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

عندما لا يتم توفير خاصية locale لـ Link، يتم استخدام اللغة المحلية النشطة حاليًا أثناء انتقالات العميل.

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/products">Products</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

تحافظ هذه الروابط تلقائيًا على اللغة المحلية الحالية. إذا كان المستخدم يشاهد /fr/products، فإن النقر على "About" ينتقل إلى /fr/about.

3. إنشاء مساعد روابط مدرك للغة للتحكم الصريح

للحالات التي تحتاج فيها إلى تحكم صريح أو ترغب في جعل معالجة اللغة أكثر وضوحًا، قم بإنشاء مكون غلاف يمرر اللغة الحالية بشكل صريح.

import Link from "next/link";
import { useRouter } from "next/router";
import { ReactNode } from "react";

interface LocaleLinkProps {
  href: string;
  children: ReactNode;
}

export function LocaleLink({ href, children }: LocaleLinkProps) {
  const { locale } = useRouter();

  return (
    <Link href={href} locale={locale}>
      {children}
    </Link>
  );
}

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

4. التعامل مع التنقل البرمجي مع الحفاظ على اللغة

عند استخدام طرق الموجه مباشرة، يمكنك تحديد اللغة عبر خيارات الانتقال، أو الحفاظ على جميع معلومات التوجيه بما في ذلك اللغة عن طريق تمرير معلمة href ككائن.

import { useRouter } from "next/router";

export default function NavigationButton() {
  const router = useRouter();
  const { pathname, asPath, query, locale } = router;

  const handleNavigate = () => {
    router.push({ pathname: "/dashboard", query }, asPath, { locale });
  };

  return <button onClick={handleNavigate}>Go to Dashboard</button>;
}

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

5. تطبيق أنماط روابط متسقة عبر التطبيق

استخدم مكون Link القياسي في جميع أنحاء تطبيقك، معتمدًا على سلوك الحفاظ على اللغة المدمج فيه.

import Link from "next/link";

export default function ProductCard({ productId }: { productId: string }) {
  return (
    <article>
      <h2>Product {productId}</h2>
      <Link href={`/products/${productId}`}>View Details</Link>
      <Link href="/products">Back to Products</Link>
    </article>
  );
}

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