بناء مبدّل اللغة

المشكلة

المستخدم موجود على صفحة معينة، مثل /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();

  // This function sets the cookie
  const setLocaleCookie = (locale: string) => {
    document.cookie = `${localeCookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
  };

  // This function strips the current locale from the path
  const getRedirectedPath = (locale: string) => {
    if (!pathname) return '/';
    const segments = pathname.split('/');
    segments[1] = locale; // The locale is always the first segment
    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'.