כיצד לתרגם אפליקציית 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 שפות, ללא כרטיס אשראי.
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, או השתמשו ב־PTC API כדי לשלב את התרגום בצינור ה־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

כברירת מחדל, כל קובצי התרגום נארזים ב־bundle בזמן הבנייה. באפליקציות עם שפות רבות, השתמשו ב־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.

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

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

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

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

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

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