M

MLOG

עברית

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

בינאום (Internationalization) ב-Next.js: בניית אפליקציות רב-לשוניות לקהל גלובלי

בעולמנו המחובר של היום, בניית אפליקציות הפונות לקהל גלובלי אינה עוד מותרות – היא הכרח. Next.js, פריימוורק ריאקט רב-עוצמה, מספק תכונות חזקות ליישום בינאום (i18n), המאפשרות לכם ליצור אפליקציות רב-לשוניות המספקות חוויה מותאמת מקומית למשתמשים ברחבי העולם. מדריך מקיף זה ילווה אתכם דרך המושגים, הטכניקות והשיטות המומלצות החיוניות לבניית אפליקציות Next.js מבוססות בינאום.

הבנת בינאום (Internationalization) ולוקליזציה (Localization)

לפני שנצלול לפרטים הספציפיים של i18n ב-Next.js, בואו נבהיר את המונחים המרכזיים:

בעצם, i18n מכין את האפליקציה שלכם ללוקליזציה. על ידי הפרדת אלמנטים תלויי-שפה מהקוד המרכזי, אתם מקלים על תהליך הלוקליזציה של האפליקציה לשווקים שונים.

מדוע ליישם בינאום ב-Next.js?

יישום i18n באפליקציית ה-Next.js שלכם מציע יתרונות רבים:

תכונות והגדרות i18n ב-Next.js

Next.js מציעה תמיכה מובנית ב-i18n דרך תכונות הניתוב וניהול התוכן שלה. להלן פירוט של התכונות החשובות:

1. הגדרת i18n בקובץ next.config.js

התצורה המרכזית עבור i18n נמצאת בקובץ next.config.js. הנה דוגמה:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // מערך של ה-locales (קודי שפה) הנתמכים
    defaultLocale: 'en', // ה-locale שישמש כברירת מחדל
    localeDetection: true, // הפעלה/השבתה של זיהוי locale אוטומטי על בסיס הגדרות הדפדפן (אופציונלי)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

הסבר:

2. ניתוב עם קידומות Locale

Next.js מוסיפה אוטומטית קידומת של ה-locale לנתיבים. לדוגמה, אם יש לכם דף בכתובת /about וה-locale הוא 'es' (ספרדית), כתובת ה-URL תהפוך ל-/es/about. זה מאפשר גרסאות שונות של דפים בשפות שונות ומאפשר למנועי חיפוש לאנדקס תוכן עבור כל locale. הפריימוורק מטפל בהפניה ובניתוב עבורכם.

3. שימוש ב-Hook useRouter

ה-Hook useRouter מתוך next/router מספק גישה ל-locale הנוכחי ולמידע ניתוב אחר.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Locale נוכחי: {locale}

      
Locales זמינים: {locales.join(', ')}

      
Locale ברירת מחדל: {defaultLocale}

    

  );
}

export default MyComponent;

אובייקט ה-router מציע את המאפיינים המרכזיים הבאים:

אסטרטגיות לתרגום תוכן

לאחר שהגדרתם את אפליקציית ה-Next.js שלכם ל-i18n, תצטרכו ליישם אסטרטגיות לתרגום התוכן שלכם. הנה מספר גישות פופולריות:

1. שימוש במערכת ייעודית לניהול תרגומים (TMS)

עבור פרויקטים רחבי היקף עם שפות רבות, מומלץ מאוד להשתמש ב-TMS. אפשרויות פופולריות כוללות:

יתרונות:

2. יצירת קובצי תרגום בפורמט JSON

עבור פרויקטים קטנים יותר, שימוש בקובצי JSON לאחסון תרגומים הוא שיטה פשוטה ויעילה.

דוגמה למבנה ספריות:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

דוגמה לקובץ en.json:


{
  "greeting": "שלום, עולם!",
  "welcomeMessage": "ברוכים הבאים לאתר שלנו."
}

דוגמה לקובץ es.json:


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

דוגמה לקובץ MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

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

3. שימוש בספריית תרגום

מספר ספריות JavaScript מייעלות את תרגום התוכן בתוך רכיבי הריאקט שלכם.

דוגמה עם next-i18next (התקנה: npm install next-i18next i18next react-i18next):

צרו קובץ תצורת i18n (למשל, i18n.js בספריית השורש שלכם):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

צרו את תצורת ה-Next.js שלכם עבור next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // הגדרות נוספות
}

module.exports = nextConfig

הוסיפו את התצורה ואת ייבוא התרגום לקובץ _app.js שלכם:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

צרו תיקייה ומלאו אותה ב-locales עבור התרגומים שלכם.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

דוגמה ל-en/common.json:


{
  "greeting": "שלום, עולם!",
  "welcomeMessage": "ברוכים הבאים לאתר שלנו."
}

שימוש בתרגום בתוך רכיב:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

דוגמה זו משתמשת ב-Hook useTranslation כדי לקבל תרגומים על בסיס ה-locale הנוכחי.

טיפול בנתיבים דינמיים ויצירת אתרים סטטיים (SSG)

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

1. נתיבים דינמיים (לדוגמה, /blog/[slug])

עבור נתיבים דינמיים, תצטרכו ליצור את הנתיבים הנכונים עבור כל locale בזמן הבנייה באמצעות getStaticPaths. פונקציה זו מחזירה מערך של נתיבים ש-Next.js צריכה לרנדר מראש.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // קבלת נתוני פוסטי הבלוג

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // או 'blocking' אם רוצים להציג מצב טעינה
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

הסבר:

2. יצירת אתרים סטטיים (SSG) עם getStaticProps

ב-getStaticProps, ניתן להביא תוכן מתורגם על בסיס הפרמטר locale.


export async function getStaticProps({ params, locale }) {
  // קבלת תוכן על בסיס ה-locale והפרמטרים
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

הפונקציה getPostBySlug צריכה להביא את התוכן המתורגם עבור ה-slug וה-locale הנתונים, אשר יכול להגיע מקובצי התרגום, ממסד הנתונים או מ-CMS.

3. רינדור בצד השרת (SSR) עם getServerSideProps

עבור תוכן שצריך להביא בזמן הבקשה, השתמשו ב-getServerSideProps. זה שימושי אם התוכן משתנה בתדירות גבוהה או מותאם אישית לכל משתמש.


export async function getServerSideProps({ params, locale, req, res }) {
  // קבלת נתונים על בסיס ה-locale והפרמטרים (למשל, ממסד נתונים)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

שיטות עבודה מומלצות לבינאום ב-Next.js

יישום שיטות עבודה מומלצות אלו יעזור לכם לבנות אפליקציות רב-לשוניות חזקות, קלות לתחזוקה וידידותיות למשתמש:

שיקולי SEO לאתרים מבוססי בינאום

אופטימיזציה של האתר הבינלאומי שלכם למנועי חיפוש חיונית להנעת תנועה אורגנית מרחבי העולם. הנה כמה שיטות SEO מומלצות:

דוגמה: בניית בלוג רב-לשוני פשוט

בואו ניצור דוגמה פשוטה של בלוג רב-לשוני באמצעות Next.js. זה יספק המחשה קונקרטית יותר של אופן יישום המושגים שנדונו לעיל.

1. הגדרת הפרויקט

צרו פרויקט Next.js חדש:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. הגדרת i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. יצירת קובצי תרגום

צרו תיקיית locales בספריית השורש והוסיפו את קובצי ה-JSON הבאים:

locales/en.json:


{
  "title": "ברוכים הבאים לבלוג שלי",
  "postTitle": "הפוסט הראשון שלי",
  "postContent": "זהו התוכן של פוסט הבלוג הראשון שלי."
}

locales/es.json:


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json:


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. יצירת רכיב פוסט הבלוג (לדוגמה, components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. יצירת דף הבית (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

דוגמה פשוטה זו מציגה את העקרונות הבסיסיים של בינאום ב-Next.js. ניתן להרחיב על בסיס זה כדי לכלול תכונות מורכבות יותר, כגון נתיבים דינמיים ואינטגרציה עם מערכות לניהול תרגומים. שקלו לשפר את הקישורים למעלה עם רכיב ה-Link ולהוסיף את תכונת ה-locale המתאימה.

6. הפעלת האפליקציה

הריצו את האפליקציה עם:


npm run dev

כעת תוכלו לגשת לבלוג שלכם בכתובת http://localhost:3000 (אנגלית), http://localhost:3000/es (ספרדית) ו-http://localhost:3000/fr (צרפתית). אתם אמורים לראות את הכותרת ואת תוכן פוסט הבלוג מתורגמים בהתאם ל-locale שנבחר.

סיכום

Next.js מספקת סט מקיף של תכונות ליישום בינאום באפליקציות האינטרנט שלכם. על ידי יישום העקרונות והטכניקות המתוארים במדריך זה, תוכלו ליצור אפליקציות רב-לשוניות המספקות חוויות מותאמות מקומית למשתמשים ברחבי העולם. זכרו לתכנן את אסטרטגיית ה-i18n שלכם מוקדם, לבחור את שיטת התרגום הנכונה לצרכים שלכם, ולתעדף את חוויית המשתמש. עם תכנון וביצוע קפדניים, תוכלו לבנות אפליקציות שמהדהדות עם קהל גלובלי ופותחות הזדמנויות חדשות לצמיחה. למידה מתמשכת, והתעדכנות במהדורות האחרונות ובשיטות העבודה המומלצות יבטיחו שאתם מנצלים את הכלים והטכנולוגיות שלכם ביעילות.

ככל שהטכנולוגיה מתקדמת, צפו לראות תכונות i18n מתקדמות יותר. היכולת להגיע למשתמשים בתרבויות וקבוצות לשוניות שונות תישאר בעדיפות עליונה עבור מפתחי אפליקציות ברחבי העולם. לכן, שליטה ביסודות ה-i18n היא מיומנות יקרת ערך שתשפר את הערך שלכם בנוף הפיתוח הגלובלי של ימינו.