محفظة

telegram_fill
linkedin [currentColor] Created with Sketch.
menuCloseIcon

BAHADOR

CODES

February 2, 2025

دليل كامل لتطبيق التدويل (i18n) في Next.js 15 App Router باستخدام next-intl

تعلم كيفية تنفيذ التدويل (i18n) في Next.js 15 App Router باستخدام next-intl لإنشاء تطبيق متعدد اللغات بتحسينات في تجربة المستخدم وSEO، مع حلول للتحديات الشائعة مثل التوجيه وحفظ اللغة في الروابط.

Next.js 15

Next-intl

I18n

Internationalization

React.js

App router

Implementing i18n in Next.js 15 App Router: A Complete Guide

المقدمة

يمكن أن يكون بناء تطبيق متعدد اللغات في Next.js 15 App Router تحديًا، ولكن مع الأدوات المناسبة يصبح الأمر سلسًا. يضمن تدويل التطبيقات (i18n) دعم تطبيقك لعدة لغات، مما يحسن تجربة المستخدم وتحسين محركات البحث (SEO) للجماهير العالمية.

في هذا الدليل، سنستعرض كيفية تنفيذ i18n في Next.js 15 باستخدام next-intl. ستتعلم كيفية:

  • إعداد الترجمات
  • تكوين التوجيه المستند إلى اللغة
  • التعامل مع Middleware لاكتشاف اللغة تلقائيًا
  • التغلب على التحديات الشائعة في i18n

بنهاية هذا الدليل، سيكون تطبيقك في Next.js متعدد اللغات بالكامل ومُحسَّنًا للمستخدمين الدوليين!

لماذا next-intl؟

مع تقديم App Router في Next.js 15، تغيرت طريقة إدارة التدويل (i18n) بشكل كبير. على عكس الإصدارات السابقة التي اعتمدت على مكتبات مثل next-i18next باستخدام getStaticProps وgetServerSideProps، فإن بنية Server Components الجديدة تتطلب نهجًا مختلفًا.

إليك لماذا next-intl هو الخيار الأفضل لـ i18n في Next.js 15:

✅ متوافق تمامًا مع App Router – يعمل بسلاسة مع Server & Client Components.
✅ اكتشاف اللغة تلقائيًا – يستخدم Middleware لمعالجة عمليات إعادة التوجيه وإعادة الكتابة.
✅ تحسين محركات البحث (SEO) المحسن – يدعم عناوين URL المحلية لتعزيز رؤية محركات البحث.
✅ إدارة ترجمات مرنة – تحميل الترجمات ديناميكيًا لأداء محسّن.
✅ خفيف وسهل الاستخدام – إعداد بسيط دون تعقيدات غير ضرورية.

باستخدام next-intl، يمكننا بناء تطبيق متعدد اللغات في Next.js 15 App Router بطريقة نظيفة وقابلة للتطوير وفعالة، مع الاستفادة من أحدث ميزات Next.js.

 

الإعداد

لبدء استخدام i18n في Next.js 15 App Router، نحتاج إلى تثبيت الحزمة المطلوبة وتنظيم مشروعنا بشكل صحيح. إذا لم تقم بإعداد تطبيق Next.js بعد، قم بذلك أولًا، ثم ثبّت next-intl:

 
npm install next-intl

الآن، لنقم بتنظيم المشروع لدعم i18n في Next.js 15 App Router:

 
├── messages
│   ├── en.json (1)
│   └── ...
├── next.config.mjs (2)
└── src
    ├── i18n
    │   ├── routing.ts (3)
    │   └── request.ts (5)
    ├── middleware.ts (4)
    └── app
        └── [locale]
            ├── layout.tsx (6)
            └── page.tsx (7)

إذا كنت تقوم بترحيل تطبيق Next.js موجود إلى next-intl، انقل الصفحات إلى مجلد [locale] لدمجها في i18n في Next.js 15 App Router.

 

1. إضافة ملفات الترجمة

كل لغة تحتاج إلى ترجمتها الخاصة. الطريقة الأبسط هي تخزين النصوص داخل ملفات JSON في دليل messages.

messages/en.json:

{
  "HomePage": {
    "title": "Hello world!",
    "about": "Go to the about page"
  }
}

هذه الملفات تحتوي على المحتوى المترجم لتطبيقك، وهي تشكل النواة لـ i18n في Next.js 15 App Router.

 

2. تكوين Next.js لدعم i18n

بعد ذلك، نقوم بتعديل next.config.mjs لدمج next-intl، مما يضمن استرجاع إعدادات اللغة الصحيحة لكل طلب.

next.config.ts:

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

هذا الإعداد ضروري لمعالجة الترجمات ديناميكيًا في i18n في Next.js 15 App Router.

 

3. إعداد التوجيه (Routing)

يلعب التوجيه دورًا أساسيًا في i18n في Next.js 15 App Router. يتيح هذا الإعداد عناوين URL المستندة إلى اللغة مثل /en/about دون الحاجة إلى معالجة يدوية إضافية.

src/i18n/routing.ts:

import {defineRouting} from 'next-intl/routing';
import {createNavigation} from 'next-intl/navigation';

export const routing = defineRouting({
  locales: ['en', 'ar'],
  defaultLocale: 'en'
});

export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);

بفضل هذا الإعداد، سيتمكن تطبيقك من إدارة التوجيه استنادًا إلى اللغة تلقائيًا، وهي ميزة أساسية لـ i18n في Next.js 15 App Router.

 

4. إضافة Middleware لاكتشاف اللغة تلقائيًا

يضمن Middleware إعادة توجيه المستخدمين إلى لغتهم المفضلة تلقائيًا.

src/middleware.ts:

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';

export default createMiddleware(routing);

export const config = {
  matcher: ['/', '/(ar|en)/:path*']
};

هذه الخطوة أساسية لتحسين تجربة المستخدم وتحسين SEO في i18n في Next.js 15 App Router.

 

5. تحميل الترجمات داخل Server Components

لجعل الترجمات متاحة في Server Components، نقوم بإنشاء ملف تكوين مركزي.

src/i18n/request.ts:

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

export default getRequestConfig(async ({requestLocale}) => {
  let locale = await requestLocale;
  if (!locale || !routing.locales.includes(locale as any)) {
    locale = routing.defaultLocale;
  }

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

 

6. إعداد Layout لدعم اللغات

layout.tsx يضمن تحديد لغة الوثيقة وتمرير الترجمات إلى Client Components.

src/app/[locale]/layout.tsx:

import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
import {notFound} from 'next/navigation';
import {routing} from '@/i18n/routing';

export default async function LocaleLayout({ children, params: {locale} }) {
  if (!routing.locales.includes(locale as any)) {
    notFound();
  }

  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

 

7. استخدام الترجمات في الصفحات

أخيرًا، لنستخدم الترجمات داخل Component الصفحة.

src/app/[locale]/page.tsx:

import {useTranslations} from 'next-intl';
import {Link} from '@/i18n/routing';

export default function HomePage() {
  const t = useTranslations('HomePage');
  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href="/about">{t('about')}</Link>
    </div>
  );
}

التحديات الشائعة والحلول

إخفاء /en في عناوين URL: تجنب بادئات اللغة غير الضرورية

بشكل افتراضي، تُضيف Next.js رمز اللغة إلى عنوان URL، مثل /en/about. إذا كانت الإنجليزية هي اللغة الافتراضية، فقد لا ترغب في عرض بادئة اللغة (/en).

الحل: تعديل تكوين التوجيه

src/i18n/routing.ts:

import { defineRouting } from "next-intl/routing";
import { createNavigation } from "next-intl/navigation";

export const routing = defineRouting({
  locales: ["en", "ar"],
  localePrefix: "as-needed",
  defaultLocale: "en",
});

لماذا هذا مهم؟

🔹 يبقي عناوين URL نظيفة وسهلة القراءة.
🔹 يحسن تجربة المستخدم وسهولة التنقل.
🔹 يحسن SEO عن طريق إزالة المحتوى المكرر.

 

التعامل مع اللغات غير الصالحة: إعادة التوجيه إلى صفحة 404

إنشاء صفحة 404 محلية

app/[locale]/not-found.tsx:

 
import { useTranslations } from 'next-intl';

export default function NotFoundPage() {
  const t = useTranslations('NotFoundPage');
  return <h1>{t('title')}</h1>;
}

التعامل مع المسارات غير المعروفة

app/[locale]/[...rest]/page.tsx:

import { notFound } from 'next/navigation';

export default function CatchAllPage() {
  notFound();
}

 

الحفاظ على اللغة في الروابط: تجنب التنقل غير المتوقع

استخدام مكون Link من next-intl

app/[locale]/page.tsx:

import { Link } from '@/i18n/routing';
import { useTranslations } from 'next-intl';

export default function HomePage() {
  const t = useTranslations('HomePage');
  return (
    <div>
      <h1>{t('title')}</h1>
      <Link href="/about">{t('about')}</Link>
    </div>
  );
}
 
 

الخاتمة

يعد تنفيذ Next.js 15 App Router مع next-intl للتدويل (i18n) طريقة فعالة لتحسين تجربة المستخدم في موقعك متعدد اللغات. من خلال اتباع خطوات الإعداد والتعامل مع التحديات الشائعة، مثل إخفاء بادئة اللغة الافتراضية، ومعالجة اللغات غير الصالحة، والحفاظ على اللغة في روابط التنقل، يمكنك إنشاء حل سلس، محسّن لمحركات البحث (SEO)، وقابل للتطوير لأي تطبيق Next.js متعدد اللغات.

تُسهّل حزمة next-intl دمج التدويل في تطبيق Next.js 15، مما يضمن تحسين التوجيه، ومعالجة اللغات، وإدارة الرسائل لدعم لغات متعددة بكفاءة. بفضل إعداد بسيط لكنه قوي، يمكنك تقديم محتوى محلي للمستخدمين دون التأثير على الأداء أو تحسين محركات البحث (SEO).

من خلال اتباع الخطوات المذكورة في هذا الدليل، أصبحت الآن قادرًا على تنفيذ next-intl في مشروعك على Next.js. لا تنسَ التحديات والحلول التي ناقشناها لضمان تجربة تدويل سلسة لكل من المستخدمين والمطورين. تمنياتنا لك ببرمجة ممتعة!

عن الكاتب

Bahador Mohammad Hoseini

بهادر محمد حسینی

(Frontend Engineer & Full-Stack Developer)

telegram_fill
linkedin [currentColor] Created with Sketch.