التدويل (i18n) هو عملية تصميم تطبيق ليكون قابلاً للتكيف بسهولة مع اللغات والمناطق المختلفة دون تغييرات هندسية. ستتعلم في هذه المقالة كيفية إعداد i18n في تطبيق Next.js وإنشاء محوّل لغة للتبديل بين اللغتين الإنجليزية والإسبانية باستخدام next-intl.

تثبيت

أولاً، تحتاج إلى تثبيت مكتبة next-intl، التي تسهل إدارة التدويل في Next.js. قم بتشغيل الأمر التالي في جهازك الطرفي:

npm install next-intl

هيكل المشروع

سيكون هيكل المشروع على النحو التالي:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. إعداد رسائل الترجمة

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

الرسائل/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

الرسائل/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

تحتوي هذه الملفات على ترجمات العبارات التي سيستخدمها تطبيقك.

2. تكوين Next.js

قم بتكوين Next.js لدعم التدويل في next.config.mjs.

next.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

يقوم هذا الملف بتكوين Next.js لتحميل رسائل الترجمة الصحيحة بناءً على اللغة المطلوبة.

3. تدويل الوسيطة

إنشاء برامج وسيطة للتعامل مع إعادة التوجيه وتعيين اللغة الافتراضية.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

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

4. تكوين التدويل

إنشاء ملف تكوين لإدارة إعدادات التدويل.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

يقوم هذا الملف بالتحقق من صحة اللغات وتحميل الرسائل المقابلة.

5. إعداد التخطيط والصفحة

قم بتكوين التخطيط والصفحة الرئيسية لدعم التدويل.

src/app/[locale]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

تقوم هذه الملفات بتكوين التخطيط والصفحة الرئيسية لاستخدام الترجمات.

6. إنشاء محوّل اللغة

أخيرًا، قم بإنشاء محول لغة للتبديل بين الإنجليزية والإسبانية.

src/app/[locale]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      
        English
        Spanish
      
    
  );
}

يسمح هذا المكون للمستخدمين بتغيير لغة الواجهة.

خاتمة

باستخدام هذه الخطوات، تكون قد نجحت في إعداد التدويل في تطبيق Next.js الخاص بك وإنشاء محوّل لغة للتبديل بين اللغتين الإنجليزية والإسبانية. سيسمح هذا لتطبيقك بدعم لغات متعددة وتوفير تجربة مستخدم محلية.