ترجمة Next.js للتطبيق الموجه، تلقائيًا

كيف يعمل

الملفات الموجودة تحت app/ بدون 'use client' هي مكونات خادمة، والتي لا يمكنها استدعاء الخطافات. تحصل على const { t } = await getTranslation() بدلاً من ذلك، من وحدة i18n.server تم إنشاؤها تقرأ ملف تعريف الارتباط lang، ثم Accept-Language.

تحتفظ المكونات العميلة بـ useTranslation()، ويمرر التخطيط الجذر نفس اللغة إليها، لذلك يتم عرض الصفحة بلغة واحدة على الخادم والعميل.

قبل وبعد

المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.

export default function Home() {
  return (
    <main>
      <h1>Ship in every language</h1>
      <p>Start a free trial today.</p>
    </main>
  );
}

import { useTranslation } from 'react-i18next';

export default function Home() {
  const { t } = useTranslation();
  return (
    <main>
      <h1>{t('home.ship_in_every_language')}</h1>
      <p>{t('home.start_a_free_trial_today')}</p>
    </main>
  );
}

{
  "home": {
    "ship_in_every_language": "Ship in every language",
    "start_a_free_trial_today": "Start a free trial today."
  }
}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد react-i18next (خادم وعميل) إذا لم يكن المشروع يحتوي عليه بعد:

• i18next و react-i18next، src/i18n.ts و i18n.server.ts
• مكون <I18nProvider> حول التخطيط الجذر، و <html lang> الذي يتبع اللغة
• مبدل لغة يقوم بتعيين ملف تعريف الارتباط وتحديث الصفحة، بحيث يتم إعادة عرض المكونات الخادمة
• خدمة proxy.ts لـ /es/about مع صفحة /about بالإسبانية، وروابط hreflang بين اللغات، بحيث تفهرس محركات البحث كل منها

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.