next-i18next VS next-intl VS Intlayer | Next.js Internationalization (i18n)
فيما يلي مقارنة موجزة بين ثلاث مكتبات شائعة لتدويل (i18n) تطبيق Next.js: next-intl، next-i18next، و Intlayer.
يسلط هذا المستند الضوء على المعايير الرئيسية:
- البنية المعمارية (الحفاظ على الترجمات بالقرب من مكوناتها)
- دعم TypeScript
- إدارة الترجمات المفقودة
- دعم مكونات الخادم
- توجيه مُحسّن & middleware لـ Next.js
- بساطة الإعداد
يوفر الدليل أيضًا نظرة عميقة على Intlayer، مما يوضح لماذا يمكن أن يكون خيارًا قويًا - خاصة لـ Next.js 13+، بما في ذلك موجه التطبيقات و مكونات الخادم.
نظرة عامة على كل مكتبة
1. next-intl
التركيز الرئيسي: إعداد سريع وسهل مع نهج خفيف لتوطين.
- البنية المعمارية: تشجع على تجميع الترجمات في مجلد واحد (مثل locales/) لكنها تسمح أيضًا باستراتيجيات متعددة. لا تفرض بدقة بنية "ترجمة لكل مكون".
- دعم TypeScript: تكامل أساسي مع TypeScript. توجد بعض تعريفات النوع، لكنها ليست مركزة بكثافة على التوليد التلقائي لتعريفات TypeScript من ملفات الترجمة الخاصة بك.
- الترجمات المفقودة: آلية تراجع أساسية. بشكل افتراضي، تتراجع إلى مفتاح أو سلسلة محلية افتراضية. لا توجد أدوات قوية خارج الصندوق لعمليات فحص الترجمات المفقودة المتقدمة.
- دعم مكونات الخادم: تعمل مع Next.js 13+ بشكل عام، لكن النمط أقل تخصصًا للاستخدام العميق على جانب الخادم (مثل مكونات الخادم مع توجيه ديناميكي معقد).
- التوجيه و middleware: الدعم المتاح محدود. يعتمد عادة على Middleware في Next.js لاكتشاف المحلية، أو التكوين اليدوي لإعادة كتابة مسارات المحلية.
- بساطة الإعداد: بسيطة جدًا. الحد الأدنى من الكود المبدئي مطلوب.
استخدمها عندما: تريد نهجًا أبسط أو تشعر بالراحة في إدارة الترجمات الخاصة بك بطرق أكثر تقليدية (مثل مجلد واحد مع ملفات JSON محلية).
2. next-i18next
التركيز الرئيسي: حل مثبت عبر الزمن يستخدم i18next تحت الغطاء، ومتبع على نطاق واسع لمشاريع Next.js.
- البنية المعمارية: غالبًا ما تنظم الترجمات في مجلد public/locales. لم يتم تصميمه خصيصًا للحفاظ على الترجمات "بالقرب" من كل مكون، على الرغم من أنه يمكنك اعتماد بنية مختلفة يدويًا.
- دعم TypeScript: تغطية معقولة لـ TypeScript لكنها تتطلب تكوينًا مخصصًا للترجمات المــــعــنونة و الـhooks المعنونة.
- الترجمات المفقودة: يقدم i18next التداخل/التراجعات. ومع ذلك، فإن اكتشاف الترجمة المفقودة عادةً ما يحتاج إلى إعداد إضافي أو مكونات إضافية.
- دعم مكونات الخادم: تم توثيق الاستخدام الأساسي مع Next.js 13، ولكن قد يكون الاستخدام المتقدم (مثل التكامل العميق بمكونات الخادم، وإنشاء المسارات الديناميكية) مرهقًا.
- التوجيه و middleware: يعتمد بقوة على Middleware في Next.js وإعادة الكتابة لمسارات المحلية. قد تحتاج إلى الغوص في تكوين i18next المتقدم للإعدادات الأكثر تعقيدًا.
- بساطة الإعداد: نهج مألوف لأولئك المألوفين مع i18next. ومع ذلك، يمكن أن تصبح أكثر تعقيدًا عندما تكون الميزات المتقدمة مطلوبة (مثل الفضاءات، وموارد محلية افتراضية متعددة، إلخ).
استخدمها عندما: تكون قد التزمت بالفعل بنظام i18next أو لديك ترجمات موجودة تعتمد على i18next.
3. Intlayer
التركيز الرئيسي: مكتبة توطين حديثة ومفتوحة المصدر مصممة خصيصًا لـ Next.js موجه التطبيقات (12، 13، 14، و 15) مع دعم مدمج لـ مكونات الخادم و Turbopack.
المزايا الرئيسية
البنية المعمارية
- تشجع على وضع الترجمات بجانب مكوناتها. يمكن أن تحتوي كل صفحة أو مكون على ملف .content.ts (أو JSON) خاص بها - لا مزيد من البحث في مجلد ترجمة عملاق.
- يجعل ذلك الشيفرة الخاصة بك أكثر وحدوية وقابلة للصيانة، خاصة في قواعد الشيفرة الكبيرة.
دعم TypeScript
- تعريفات نوع تم إنشاؤها تلقائيًا: في اللحظة التي تعرف فيها محتواك، يقوم Intlayer بإنشاء أنواع تدعم الإكمال التلقائي والتقاط أخطاء الترجمة.
- يقلل من الأخطاء أثناء التشغيل مثل المفاتيح المفقودة ويقدم الإكمال التلقائي المتقدم مباشرة في IDE الخاص بك.
إدارة الترجمات المفقودة
- خلال البناء، يمكن لـ Intlayer اكتشاف مفاتيح الترجمة المفقودة وإلقاء التحذيرات أو الأخطاء.
- يضمن ذلك أنك لن تشحن أبدًا نصًا مفقودًا عبر لغاتك.
محسن لمكونات الخادم
- متوافق تمامًا مع موجه التطبيقات لـ Next.js ونموذج مكونات الخادم الجديد.
- يقدم موفري خدمات متخصصين (IntlayerServerProvider، IntlayerClientProvider) لـ عزل سياق الخادم (مهم عند التعامل مع Next.js 13+).
توجيه مُحسّن & middleware
- يتضمن intlayerMiddleware لاكتشاف المحلية تلقائيًا (عبر ملفات تعريف الارتباط أو رؤوس المتصفح) وتوليد المسارات المتقدمة.
- يتعامل ديناميكيًا مع المسارات المحلية (مثل /en-US/about مقابل /fr/about) مع تكوين بسيط.
- يقدم طرق مساعدة مثل getMultilingualUrls لتوليد روابط لغات بديلة (رائع لـ SEO).
إعداد مبسط
- ملف إعداد واحد (intlayer.config.ts) لتعريف محلياتك، المحلية الافتراضية، وتفضيلات التكامل.
- مكون إضافي Wrapper withIntlayer(nextConfig) الذي يحقن جميع متغيرات البيئة والمراقبين لمحتواك.
- لا تكوينات تراجع كبيرة
- يتم تصميم النظام ليعمل "فقط" مع الحد الأدنى من الاحتكاك.
النتيجة النهائية: Intlayer هو حل حديث يريد دفع أفضل الممارسات: من الحفاظ على الترجمات قريبة من كل مكون React، إلى تقديم دعم TS قوي و سهولة الاستخدام على الجانب الخادم، بينما يقلل بشكل كبير من الأكواد المبدئية.
مقارنة الميزات جنبًا إلى جنب
الميزة | next-intl | next-i18next | Intlayer |
---|---|---|---|
الحفاظ على الترجمات بالقرب من المكونات | جزئي - عادةً مجلد محلي واحد | ليس افتراضيًا - غالبًا ما يكون public/locales | نعم - موصى به وسهل |
توليد TypeScript تلقائي | تعريفات TypeScript أساسية | دعم TypeScript أساسي | نعم - متقدم خارج الصندوق |
اكتشاف الترجمات المفقودة | في الغالب سلاسل تراجع | في الغالب سلاسل تراجع | نعم - فحوصات في وقت البناء |
دعم مكونات الخادم | تعمل لكن ليست متخصصة | مدعومة لكنها قد تكون مرهقة | دعم كامل مع موفري خدمات متخصصين |
التوجيه & middleware | مدمج يدويًا مع middleware في Next | موفر عبر إعادة كتابة التكوين | middleware i18n مخصص + روابط متقدمة |
تعقيد الإعداد | بسيطة، تكوينات الحد الأدنى | تقليدية، يمكن أن تكون مرهقة للاستخدام المتقدم | ملف إعداد واحد وملحق |
لماذا Intlayer؟
للفرق التي تنتقل إلى أو تبني على موجه التطبيقات لـ Next.js (الإصدارات 13، 14، أو 15) مع مكونات الخادم، يوفر Intlayer:
بنية معمارية مبسطة
- تحتوي كل مسار أو مكون على ترجماته الخاصة. هذا يعزز الوضوح وقابلية الصيانة.
تكامل قوي مع TypeScript
- تحصل على أمان على مستوى المترجم، مما يتجنب المفاتيح المفقودة أو المليئة بالأخطاء.
تنبيهات حقيقية لترجمات مفقودة
- إذا نسيت مفتاحًا أو ترجمة لغة، سيتم تحذيرك عند وقت البناء (بدلاً من شحن واجهة مستخدم غير مكتملة).
توجيه متقدم مدمج
- يتضمن اكتشاف محلي تلقائي، وتوليد ديناميكي للمسارات، وإدارة سهله لروابط الـURL المحلية.
- لا يتطلب intlayerMiddleware القياسية إعادة كتابة مخصصة عميقة.
إعداد موحد
- كود بسيط: فقط عرّف intlayer.config.ts،Wrap next.config مع withIntlayer، وأضف middleware الرسمي.
- استخدام واضح ومباشر لكل من مكونات الخادم و العميل عبر IntlayerServerProvider و IntlayerClientProvider.
صديق SEO
- المساعدة المدمجة (getMultilingualUrls، سمات hrefLang، إلخ) تسهل إنتاج صفحات وخ خرائط مواقع متوافقة مع SEO.
مثال: Intlayer في العمل
فيما يلي مقتطف مختصر جداً يوضح كيفية استخدام Intlayer في مشروع Next.js 15. لمزيد من التفاصيل وأمثلة الكود، تحقق من دليل Intlayer الكامل.
مثال خطوة بخطوة
التثبيت والتكوين
bashnpm install intlayer next-intlayer
ts// intlayer.config.tsimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], defaultLocale: Locales.ENGLISH, },};export default config;
استخدم المكون الإضافي
ts// next.config.mjsimport { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);
أضف Middleware
ts// src/middleware.tsexport { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = { matcher: "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};
إنشاء تخطيط محلي
tsx// src/app/[locale]/layout.tsximport { getHTMLTextDir } from "intlayer";import { NextLayoutIntlayer } from "next-intlayer";const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => { const { locale } = params; return ( <html lang={locale} dir={getHTMLTextDir(locale)}> <body>{children}</body> </html> );};export { generateStaticParams } from "next-intlayer";export default LocaleLayout;
إعلان واستخدام المحتوى
tsx// src/app/[locale]/page.content.tsimport { t } from "intlayer";export default { key: "page", content: { getStarted: { main: t({ en: "Get started by editing", fr: "Commencez par éditer", es: "Comience por editar", }), pageLink: "src/app/page.tsx", }, },};
tsx// src/app/[locale]/page.tsximport { IntlayerServerProvider } from "next-intlayer/server";import { IntlayerClientProvider, useIntlayer } from "next-intlayer";const PageContent = () => { const { content } = useIntlayer("page"); return ( <> <p>{content.getStarted.main}</p> <code>{content.getStarted.pageLink}</code> </> );};export default function Page({ params }) { return ( <IntlayerServerProvider locale={params.locale}> <IntlayerClientProvider locale={params.locale}> <PageContent /> </IntlayerClientProvider> </IntlayerServerProvider> );}
الخاتمة
كل حل—next-intl، next-i18next، و Intlayer—أثبت فعاليته لمشاريع Next.js متعددة اللغات. ومع ذلك، فإن Intlayer تذهب أبعد من ذلك من خلال:
- تشجيع بناء بنية ترجمة على مستوى المكونات
- التكامل بسلاسة مع Next.js 13+ و مكونات الخادم
- تقديم توليد TypeScript قوي للشفرة الأكثر أماناً
- التعامل مع الترجمات المفقودة عند بناء الشيفرة
- توفير نهج إعداد مبسط، مع توجيه و middleware متقدمان
إذا كنت ترغب في ميزات i18n حديثة مصممة لموجه تطبيقات Next.js وتبحث عن تجربة مكتوبة بالكامل دون ربط يدوي للترجمات المفقودة، أو إعدادات المسار، أو خطوات بناء معقدة، فإن Intlayer هي خيار جذاب. فهي لا تقصر من وقت الإعداد الخاص بك فحسب، بل تضمن أيضًا نهجًا أكثر صيانة وقابلية للتوسع للترجمات لفريقك.
إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للمدونة