11.3 בינלאומיות תרגול
תרגול - בינלאומיות¶
תרגיל 1 - הגדרת i18n בסיסית¶
הגדירו תשתית i18n לאפליקציית ריאקט עם react-i18next:
- תמיכה בשלוש שפות: עברית, אנגלית וערבית
- שני namespaces: common ו-errors
- זיהוי שפה אוטומטי מהדפדפן
- שפת ברירת מחדל: עברית
- שמירת בחירת השפה ב-cookie
צרו את קבצי התרגום עבור:
- כותרת האפליקציה
- פריטי ניווט (דף הבית, מוצרים, אודות, צור קשר)
- כפתורי פעולה (שמור, ביטול, מחק, ערוך)
- הודעות שגיאה (שדה חובה, אימייל לא תקין, סיסמה קצרה מדי)
תרגיל 2 - קומפוננטת החלפת שפה עם RTL¶
צרו קומפוננטת בוחר שפה (LanguageSwitcher) שכוללת:
- תפריט dropdown עם דגלים ושמות שפות
- החלפת שפה בלחיצה
- עדכון כיוון הדף (dir) בהתאם לשפה (RTL לעברית וערבית, LTR לאנגלית)
- עדכון ה-lang attribute ב-html
- שמירת הבחירה ב-localStorage
- אנימציה חלקה במעבר בין RTL ל-LTR
כתבו גם את ה-CSS עם Logical Properties כך שה-Layout יעבוד בצורה נכונה בשתי הכיוונים.
תרגיל 3 - Hook לעיצוב לוקלי¶
צרו custom hook בשם useFormatters שמחזיר פונקציות עיצוב מותאמות ל-locale הנוכחי:
formatNumber(value)- עיצוב מספר (אלפים עם פסיק/נקודה)formatCurrency(value, currency?)- עיצוב מטבע (ברירת מחדל: ILS)formatPercent(value)- עיצוב אחוזformatDate(date, style?)- עיצוב תאריך (short, medium, long, full)formatRelativeTime(date)- זמן יחסי ("לפני 3 דקות", "אתמול")formatList(items)- עיצוב רשימה ("א, ב ו-ג")
צרו קומפוננטה שמדגימה את כל הפונקציות ומראה את ההבדל בין שפות.
תרגיל 4 - טופס רב-לשוני¶
צרו טופס יצירת קשר שתומך בשלוש שפות:
- כל התוויות, placeholders, הודעות שגיאה וכפתורים מתורגמים
- אימות עם Zod וכללי ריבוי (למשל "השדה חייב להכיל לפחות {{min}} תווים")
- שם השולח, אימייל, נושא ותוכן ההודעה
- הודעת הצלחה מתורגמת
- הטופס מתהפך כיוון ב-RTL (תוויות מימין, שגיאות מימין)
תרגיל 5 - SEO רב-לשוני ב-Next.js¶
הגדירו תשתית SEO רב-לשונית עבור Next.js שכוללת:
- Middleware שמזהה שפה ומנתב לנתיב המתאים (
/he/about,/en/about) - תגיות hreflang בכל דף
- Metadata מתורגם (title, description) עבור כל שפה
- Sitemap רב-לשוני שכולל את כל השפות
- קובץ robots.txt שמצביע על ה-Sitemap
תרגיל 6 - דף מוצר רב-לשוני מלא¶
צרו דף מוצר שלם שתומך בשלוש שפות וכולל:
- שם מוצר, תיאור ומפרט תורגמו
- מחיר מעוצב לפי מטבע מקומי (שקל, דולר, ריאל)
- תאריך עדכון אחרון בעיצוב מקומי
- כמות במלאי עם ריבוי נכון ("פריט אחד" / "5 פריטים" / "1 item" / "5 items")
- ביקורות עם דירוג וזמן יחסי ("לפני שעתיים")
- כפתורי פעולה מתורגמים
- עיצוב מותאם ל-RTL (תמונה, טקסט, כפתורים)
שאלות¶
- מה ההבדל בין i18n ל-l10n? תנו דוגמה מעשית לכל אחד.
- מדוע כדאי להשתמש ב-CSS Logical Properties במקום left/right? מה קורה כשלא משתמשים בהם באתר RTL?
- מה זה namespace ב-i18next ולמה כדאי להשתמש ב-namespaces נפרדים?
- הסבירו כיצד פועל ה-Intl API ומה היתרון שלו על עיצוב ידני.
- מה תפקיד תגית hreflang ומה קורה אם לא מגדירים אותה באתר רב-לשוני?