כיצד לתרגם אפליקציית React באמצעות react-i18next

הגדירו את react-i18next, תרגמו את en.json ליותר מ־40 שפות באמצעות בינה מלאכותית, ולאחר מכן תנו לתוסף הדפדפן של PTC (Private Translation Cloud) לסקור את אפליקציית ה־React הפועלת בכל שחרור הגרסה. מדריך זה מכסה את תהליך הבינאום של React מקצה לקצה: הגדרת react-i18next, טיפול בצורות רבים ובתוכן דינמי, תרגום ה־en.json שלכם ליותר מ־40 שפות בעזרת PTC, והחלפת שפות בזמן ריצה. בסיום המדריך תהיה לכם סביבת לוקליזציה עובדת ב־React שמוכנה להפצה. לסקירה של כלי התרגום העצמאי ל־JSON, ראו תרגום קובצי JSON ברשת באמצעות בינה מלאכותית.

איך נראית אפליקציית React שעברה לוקליזציה

אפליקציית React שבה:

• כל המחרוזות המוצגות למשתמש נמצאות בקובצי תרגום מסוג JSON תחת src/i18n/locales/ (או public/locales/).
• בורר שפה מאפשר מעבר בין אנגלית, ספרדית, צרפתית וגרמנית.
• תוכן דינמי (שמות משתמשים, ספירות, תאריכים) משולב כהלכה עבור כל locale.
• צורות רבים פועלות לפי הכללים של כל שפת יעד.
• קובצי ה־.json המתורגמים מופקים על ידי PTC, ולא נכתבים ידנית.

שלב 1: צרו שלד לאפליקציית React + TypeScript בעזרת Vite

מדריך זה משתמש באפליקציית React + TypeScript שנבנתה בעזרת Vite. אם אתם מוסיפים את react-i18next לאפליקציה קיימת, דלגו לשלב 2.

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

פעולה זו מפעילה שרת פיתוח ופותחת את עמוד ברירת המחדל של Vite + React בדפדפן שלכם.

שלב 2: התקינו את react-i18next והחליפו מחרוזות מוטמעות בקוד ב־t()

npm install i18next react-i18next

צרו את מבנה התיקיות עבור i18n ב־React:

src/
  i18n/
    locales/
      en.json

הוסיפו את המחרוזות שלכם באנגלית אל src/i18n/locales/en.json:

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

רכיב React טיפוסי עם מחרוזות מוטמעות בקוד:

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is a localization demo.</p>
      <button onClick={() => alert('Click me')}>Click me</button>
    </div>
  );
}

החליפו את הטקסט המוטמע בקוד ב־hook useTranslation:

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

useTranslation() מחזיר:

• t() - מחפש מחרוזת לפי מפתח.
• i18n - מאפשר לכם להחליף שפות באופן תוכניתי.

שלב 3: טענו אוטומטית כל קובץ JSON של locale בעזרת import.meta.glob

צרו את src/i18n/index.ts כדי להגדיר את i18next ולטעון אוטומטית קובצי תרגום. התבנית import.meta.glob אומרת שכל קובץ .json שתוסיפו אל src/i18n/locales/ ייקלט אוטומטית. אין צורך בייבוא ידני כשמוסיפים שפות חדשות:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

type TranslationResources =
  | string
  | { [k: string]: TranslationResources }
  | TranslationResources[];

const modules = import.meta.glob<{ default: Record<string, TranslationResources> }>(
  './locales/*.json',
  { eager: true }
);

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

ייבאו את i18n לפני שהאפליקציה שלכם מרונדרת. פתחו את src/main.tsx והוסיפו את הייבוא:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import './i18n'; // <- add this

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

אם תדלגו על שלב זה, t() יחזיר מפתחות תרגום במקום טקסט מתורגם.

שלב 4: שלבו משתנים, צורות רבים וקישורים באמצעות המוסכמות של i18next

שלבו משתנים עם {{variableName}}

השתמשו בתחביר {{variableName}} בקובץ ה־JSON שלכם והעבירו את הערך אל t(). עדכנו את en.json:

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

const user = { firstName: 'Sarah' };
<p>{t('userGreeting', { firstName: user.firstName })}</p>

הארגומנט השני ל־t() הוא אובייקט עם הערכים שברצונכם להציב. כמה משתנים שתצטרכו.

הגדירו צורות רבים בעזרת מפתחות סיומת _one / _other

השתמשו בתבנית הסיומת _one / _other. המשתנה חייב להיקרא count:

{
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages."
}

<p>{t('newMessages', { count: messageCount })}</p>

i18next בוחר את צורת הרבים הנכונה באופן אוטומטי. הוא גם תומך בשפות עם יותר משתי צורות רבים (פולנית, ערבית, רוסית) ללא הגדרות נוספות.

תרגמו קישורים ו־HTML בעזרת רכיב Trans

עבור תרגומים המכילים רכיבי HTML כמו קישורים או טקסט מודגש, השתמשו ברכיב Trans:

{
  "termsText": "I agree to the <1>Terms of Service</1> and <3>Privacy Policy</3>."
}

התגיות <1> ו־<3> הן מצייני מיקום מבוססי אינדקס הממופים לרכיבי הבן (הספירה מתחילה מ־0):

import { Trans } from 'react-i18next';

<Trans i18nKey="termsText">
  I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a>.
</Trans>

גישה זו שומרת את רכיבי ה־JSX שלכם בתוך הרכיב, ובמקביל מאפשרת למתרגמים לסדר מחדש את הטקסט שמסביב באופן טבעי.

עצבו תאריכים, מספרים ומטבעות בעזרת Intl

השתמשו במעצבים של Intl במקום להטמיע מחרוזות עיצוב בתוך התרגומים שלכם:

const formatDate = (date: Date, locale: string) =>
  new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(date);

const formatCurrency = (amount: number, locale: string, currency: string) =>
  new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount);

const { i18n } = useTranslation();
<p>{formatDate(new Date(), i18n.language)}</p>
<p>{formatCurrency(199.99, i18n.language, 'EUR')}</p>

שלב 5: תרגמו את קובצי ה־JSON בעזרת PTC ב־5 שלבים

כעת יש לכם en.json ואתם צריכים להפיק es.json, fr.json, de.json, וכן הלאה. PTC נועדה בדיוק לשם כך.

1. התחילו פרויקט PTC ובחרו באנגלית כשפת המקור. תקופת הניסיון מכסה 20,000 מילים לשתי שפות, ללא כרטיס אשראי.
2. העלו את en.json. PTC מנתחת את המבנה המקונן, מזהה את מצייני המיקום של i18next ({{name}}, {{count}}), ומאתרת את סיומות צורות הרבים (_one, _other).
3. הוסיפו תיאור קצר של אפליקציית ה־React שלכם ושל קהל היעד שלה. PTC משתמשת בהקשר הזה כדי להתאים את הטון והטרמינולוגיה בכל שפה.
4. בחרו שפות יעד ואשרו. PTC מפיקה .json מתורגם אחד לכל שפת יעד, זהה מבנית למקור. אותם מפתחות, אותו קינון, אותם מצייני מיקום. ערכים מתורגמים.
5. הכניסו את הקבצים לתוך src/i18n/locales/. בזכות הטעינה האוטומטית של import.meta.glob שהגדרתם בשלב 3, הקבצים החדשים עובדים מיד ללא שינויי קוד.

לאחר שתרגמתם את הקובץ הראשון שלכם בעזרת PTC, תוכלו לעבור לתהליך אוטומטי. חברו את מאגר ה־GitHub, ה־GitLab או ה־Bitbucket שלכם דרך אינטגרציית Git, או השתמשו ב־API של PTC כדי לשלב את התרגום בצינור ה־CI/CD שלכם. מחרוזות חדשות ב־en.json מפעילות תרגום אוטומטי. PTC פותחת merge request עם קובצי שפות יעד מעודכנים.

שלב 6: ודאו את ההגדרה בעזרת בורר שפה

הוסיפו כפתורי שפה כדי לוודא שהגדרת ה־react-i18next שלכם עובדת:

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

i18n.changeLanguage() מפעיל רינדור מחדש של כל רכיב שמשתמש ב־useTranslation(), כך שכל ממשק המשתמש מתעדכן מיד. ללא טעינה מחדש של הדף.

זיהוי אוטומטי של שפת המשתמש בעזרת i18next-browser-languagedetector

התקינו את i18next-browser-languagedetector כדי לטעון אוטומטית את השפה הנכונה מהגדרות הדפדפן של המשתמש, מכתובת ה־URL או מהעדפות שמורות:

npm install i18next-browser-languagedetector

import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'],
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
  });

בצעו lazy-load לתרגומים בעזרת i18next-http-backend

כברירת מחדל, כל קובצי התרגום נארזים יחד בזמן ה־build. לאפליקציות עם שפות רבות, השתמשו ב־i18next-http-backend כדי לשלוף רק את השפה שהמשתמש צריך בפועל:

npm install i18next-http-backend

import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
  });

העבירו את קובצי התרגום שלכם אל public/locales/ כדי שהם יוגשו כמשאבים סטטיים:

public/
  locales/
    en/translation.json
    fr/translation.json

כעת, מעבר לצרפתית שולף את /locales/fr/translation.json לפי דרישה במקום לכלול אותו ב־bundle. ה־bundle הראשוני נשאר רזה ללא קשר למספר השפות שאתם תומכים בהן.

סקירה חזותית של התרגום באפליקציית ה־React הפועלת שלכם - שחררו גרסאות ללא QA ידני לכל שפה

לאחר ש־PTC מתרגמת את ה־en.json שלכם, עדיין עליכם לאמת את אפליקציית ה־React הפועלת. תווית מתורגמת עלולה לגלוש מכפתור בגרמנית. המילה "Save" עשויה להיות מתורגמת כשם עצם בצרפתית כשהממשק דרש פועל. מחרוזת מוטמעת בקוד באנגלית מחוץ ל־t() תוצג על המסך ללא תרגום ללא קשר למספר השפות שאתם משחררים.

ה־AI Visual QA של PTC מחליף את סבב ה־QA הידני. עבור אפליקציות מבוססות דפדפן כמו React, הווריאציה הנכונה היא תוסף הדפדפן. התקינו אותו פעם אחת והקליטו מעבר מוקלט קצר של תהליכי המשתמש הקריטיים באפליקציית ה־React שלכם (התחברות, תכונה מרכזית, הגדרות). מאותו רגע, PTC מריצה מחדש את ההקלטה בכל שפת יעד לאחר כל עדכון תרגום, מצלמת כל מסך, ובוחנת את התוצאה המרונדרת:

• תיקונים בקובצי התרגום כאשר PTC שולטת בהם. PTC מתרגמת מחדש חלק דיבר שגוי, בוחרת מילה נרדפת קצרה יותר שמתאימה לכפתור, ומייצרת מחדש צורת רבים.
• פרומפטים ל־Cursor ול־Claude Code כאשר הבעיה נמצאת בקוד הרכיב שלכם. מחרוזת מוטמעת בקוד באנגלית מחוץ ל־t(), משפט שנבנה על ידי שרשור מחרוזות במקום t('key', { var }), רכיב Trans חסר עבור תרגומי טקסט עשיר.

התוצאה: סקירה כשלב CI. כל גרסה משוחררת עם אימות חזותי בכל שפת יעד, ללא צוואר בקבוק אנושי.

תרגמו הערות גרסה, דפי שיווק ומיילים ללקוחות

הערות הגרסה, דפי השיווק, דפי הנחיתה והמיילים ללקוחות שלכם נמצאים מחוץ ל־en.json. ה־Paste to Translate של PTC מטפל בתוכן הזה באותו פרויקט. הדביקו את טקסט המקור בלוח הבקרה של PTC, בחרו שפות יעד, וקבלו בחזרה תרגומים שמשתמשים באותו מילון מונחים וטון המותג כמו מחרוזות הממשק שלכם ב־React.

תרגמו תגובות משתמשים, פוסטים ותוצאות חיפוש בעזרת ה־API של PTC

תגובות משתמשים, פוסטים, תוצאות חיפוש, וכל תוכן אחר שנוצר על ידי משתמשים שאפליקציית ה־React שלכם מטפלת בו, דורשים תרגום ברגע שהם מגיעים. ה־REST API של PTC מתרגם את התוכן הזה לפי דרישה עם אימות טוקן Bearer, תוך שימוש באותו מילון מונחים וטון המותג כמו התרגומים שלכם ב־en.json.

כעת תרגמו את קובץ ה־en.json שלכם

התחילו תקופת ניסיון של 30 יום - 20,000 מילים לשתי שפות, ללא כרטיס אשראי. שני נתיבים:

• ידני: העלו את src/i18n/locales/en.json בעמוד תרגום ה־JSON.
• מבוסס CI: חברו את מאגר ה־Git שלכם דרך ה־API של PTC וכל push שמשנה את מחרוזות המקור שלכם יחזור מתורגם.

כך או כך, התקינו את תוסף הדפדפן ותנו ל־AI Visual QA לאמת את אפליקציית ה־React הפועלת שלכם בכל שפה לפני שאתם משחררים.