بناء محوّل اللغة

المشكلة

يتواجد المستخدم على صفحة محددة، مثل /en/products/123، ويرغب في عرض نفس الصفحة بلغة أخرى. غالبًا ما يؤدي النقر على مبدل اللغة (مثل 'Français') إلى إعادته إلى الصفحة الرئيسية (/fr/) بدلاً من صفحة المنتج المقابلة، مما يعطل سير العمل ويجبره على إعادة التنقل.

الحل

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

الخطوات

1. تحديد تكوين اللغة

تأكد من أن ملف i18n.config.ts يتضمن قائمة اللغات واسم ملف تعريف الارتباط الذي ستستخدمه.

// i18n.config.ts

export const locales = ['en', 'es', 'fr'];
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

2. إنشاء مكون مبدل اللغة

قم بإنشاء ملف جديد، على سبيل المثال، app/components/LanguageSwitcher.tsx. يجب أن يكون هذا مكون عميل لاستخدام الخطافات مثل usePathname.

// app/components/LanguageSwitcher.tsx
'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { locales, localeCookieName } from '@/i18n.config';

export default function LanguageSwitcher() {
  const pathname = usePathname();

  // هذه الدالة تقوم بتعيين ملف تعريف الارتباط
  const setLocaleCookie = (locale: string) => {
    document.cookie = `${localeCookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
  };

  // هذه الدالة تقوم بإزالة اللغة الحالية من المسار
  const getRedirectedPath = (locale: string) => {
    if (!pathname) return '/';
    const segments = pathname.split('/');
    segments[1] = locale; // اللغة دائمًا هي الجزء الأول
    return segments.join('/');
  };

  return (
    <div>
      {locales.map((locale) => (
        <Link
          key={locale}
          href={getRedirectedPath(locale)}
          onClick={() => setLocaleCookie(locale)}
          style={{
            display: 'inline-block',
            padding: '0.5rem',
            textDecoration: 'underline',
          }}
        >
          {locale.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}

3. أضف محوّل اللغة إلى التخطيط الخاص بك

قم باستيراد ووضع المكون الجديد في ملف التخطيط الجذر، app/[lang]/layout.tsx. هذا يجعله مرئيًا في جميع الصفحات.

// app/[lang]/layout.tsx
import LanguageSwitcher from '@/app/components/LanguageSwitcher';

export async function generateStaticParams() {
  // This tells Next.js to pre-render 'en', 'es', and 'fr'
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'fr' }];
}

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>
        <header>
          {/* Add the switcher to your header or nav */}
          <LanguageSwitcher />
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

الآن، عندما يكون المستخدم على /es/products/123 وينقر على "EN"، يقوم المكون بحساب المسار الجديد كـ /en/products/123 ويضبط ملف تعريف الارتباط NEXT_LOCALE على 'en'.