كيفية الحفاظ على اللغة في روابط التنقل في Next.js (Pages Router) الإصدار 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، فإن النقر على "حول" ينتقل إلى /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>
  );
}

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