Magic Translate vs. next-intl

next-intl هي مكتبة i18n الأكثر استخدامًا لـ Next.js. وهي تعمل مع جهاز توجيه التطبيقات ومكونات خادم React، وهي مبنية على ملفات الرسائل بمفتاح لكل رسالة. يعرض Magic Translate أيضًا الصفحات المترجمة بالكامل على الخادم، ولكنك تكتب النص مباشرة في مكوناتك، ويتم إنشاء الترجمات من أجلك.

في لمحة

كيف تختلف الشفرة

باستخدام next-intl، يمكنك الاحتفاظ بملف رسالة لكل لغة والرجوع إلى كل رسالة بمفتاحها:

// messages/en.json
{ "HomePage": { "title": "Welcome to our website" } }

// app/[locale]/page.tsx
import { getTranslations } from 'next-intl/server';

export default async function HomePage() {
  const t = await getTranslations('HomePage');
  return <h1>{t('title')}</h1>;
}

باستخدام Magic Translate، يبقى النص في الصفحة:

// app/[locale]/page.tsx
import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function HomePage({
  params
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { T } = createLocalizedT(translate, locale);

  return (
    <h1>
      <T>Welcome to our website</T>
    </h1>
  );
}

يعرض دليل Next.js الإعداد الكامل.

متى تختار Magic Translate

• تريد موقع Next.js الخاص بك بالعديد من اللغات دون الحفاظ على ملفات الرسائل.
• يتغير النص كثيرًا، وتريد أن تظل كل لغة محدثة.
• ليس لديك مترجمين، أو تريد إصدار تحديثات دون انتظار الترجمات.

متى تختار next-intl

• يجب ترجمة جميع النصوص أو مراجعتها من قبل شخص.
• تحتاج إلى التحكم الدقيق في صيغ الجمع والتواريخ والأرقام باستخدام رسائل ICU.
• تريد مكتبة مجانية مفتوحة المصدر بدون خدمة خارجية.

استخدام كليهما

يمكنك الاحتفاظ بـ next-intl لتوجيه الإعدادات المحلية وتنسيقها، واستخدام Magic Translate للنص. قم بتمرير اللغة من next-intl إلى createLocalizedT، واستبدل المفاتيح بـ <T> صفحة واحدة في كل مرة.

هل أنت مستعد لتجربته؟ اتبع دليل البدء لترجمة المكون الأول في خمس دقائق.