מאמר
04 במאי

הפתרון הטוב ביותר לאינטארנציונליזציה (i18n) באפליקציות Next.js

האם אתם מחפשים להרחיב את אפליקציית ה-Next.js שלכם לשווקים חדשים? TacoTranslate מקלה בצורה מדהימה על לוקליזציה של פרויקט ה-Next.js שלכם, ומאפשרת לכם להגיע לקהל עולמי בלי הטרחה.

מדוע לבחור ב-TacoTranslate ל-Next.js?

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

איך זה עובד

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

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

המדריך הזה מיועד ליישומים ב-Next.js המשתמשים ב-Pages Router.
אם אתם משתמשים ב-App Router, אנא עיינו במדריך זה במקום.

שלב 1: התקן ספריית i18n

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

TacoTranslate מתרגם אוטומטית את המחרוזות שלך לכל שפה באמצעות בינה מלאכותית מתקדמת, ומשחרר אותך מהניהול המעייף של קבצי JSON.

בוא נתקין אותו באמצעות npm בטרמינל שלך:

npm install tacotranslate

שלב 2: צור חשבון TacoTranslate בחינם

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

בתוך ממשק המשתמש של TacoTranslate, צור פרויקט ונווט ללשונית מפתחות ה-API שלו. צור מפתח אחד read ומפתח אחד read/write. נשמור אותם כמשתני סביבה. המפתח read הוא מה שאנחנו קוראים לו public והמפתח read/write הוא secret. לדוגמה, תוכל להוסיף אותם לקובץ .env ששוכן בשורש הפרויקט שלך.

.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ודא לעולם לא לחשוף את מפתח ה-API הסודי read/write לסביבת הייצור בצד הלקוח.

נסכן גם שני משתני סביבה נוספים: TACOTRANSLATE_DEFAULT_LOCALE ו- TACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: קוד ברירת המחדל לשפת ברירת מחדל. בדוגמה זו, נגדיר אותו ל־en עבור אנגלית.
  • TACOTRANSLATE_ORIGIN: ה"תקייה" שבה יאוחסנו המחרוזות שלך, כגון כתובת האתר שלך. קרא עוד על origins כאן.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

שלב 3: הגדרת TacoTranslate

כדי לשלב את TacoTranslate עם היישום שלך, תצטרך ליצור לקוח באמצעות מפתחות ה-API מהשלבים הקודמים. לדוגמה, צור קובץ בשם /tacotranslate-client.js.

/tacotranslate-client.js
const {default: createTacoTranslateClient} = require('tacotranslate');

const tacoTranslate = createTacoTranslateClient({
	apiKey:
		process.env.TACOTRANSLATE_SECRET_API_KEY ??
		process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
		process.env.TACOTRANSLATE_API_KEY ??
		'',
	projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

נגדיר אוטומטית בקרוב את TACOTRANSLATE_API_KEY.

יצירת הלקוח בקובץ נפרד מקלה על השימוש החוזר בו מאוחר יותר. עכשיו, באמצעות /pages/_app.tsx מותאם אישית, נוסיף את ספק TacoTranslate.

/pages/_app.tsx
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

אם כבר יש לך pageProps מותאם אישית ו-_app.tsx, אנא הרחב את ההגדרה עם התכונות והקוד מההסבר למעלה.

שלב 4: יישום הצגה בצד השרת

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

נתחיל ביצירה או בעריכה של /next.config.js.

/next.config.js
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		client: tacoTranslateClient,
		isProduction:
			process.env.TACOTRANSLATE_ENV === 'production' ||
			process.env.VERCEL_ENV === 'production' ||
			(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
				process.env.NODE_ENV === 'production'),
	});
};

שנה את בדיקת isProduction כך שתתאים להגדרה שלך. אם true, TacoTranslate יציג את מפתח ה-API הציבורי. אם אנחנו נמצאים בסביבת בדיקה או אחסון זמני (isProduction is false), נשתמש במפתח ה-API הסודי של read/write כדי לוודא שמחרוזות חדשות נשלחות לתרגום.

עד כה, הגדרנו רק רשימת שפות נתמכות עבור אפליקציית Next.js. השלב הבא הוא לשלוף תרגומים לכל הדפים שלך. לשם כך, תשתמש בgetTacoTranslateStaticProps או בgetTacoTranslateServerSideProps בהתאם לדרישות שלך.

פונקציות אלו מקבלות שלושה ארגומנטים: אובייקט אחד של Next.js Static Props Context, קונפיגורציה עבור TacoTranslate, ופרופרטיז אופציונליים של Next.js. שימו לב ש־revalidate ב־getTacoTranslateStaticProps מוגדר כברירת מחדל ל־60, כדי שהתרגומים שלכם יישארו מעודכנים.

כדי להשתמש באחת מהפונקציות בדף, נניח שיש לכם קובץ דף כמו /pages/hello-world.tsx.

/pages/hello-world.tsx
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

כעת אתה אמור להיות מסוגל להשתמש ברכיב Translate כדי לתרגם מחרוזות בתוך כל רכיבי ה-React שלך.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

שלב 5: פרוס ובדוק!

סיימנו! אפליקציית Next.js שלך תתורגם אוטומטית כעת כשאתה מוסיף מחרוזות כלשהן לרכיב Translate. שים לב שרק סביבות עם הרשאות read/write על מפתח ה-API יוכלו ליצור מחרוזות חדשות לתרגום. אנו ממליצים על סביבה סגורה ומאובטחת לסטייג'ינג שבה תוכל לבדוק את אפליקציית הייצור שלך עם מפתח API כזה, ולהוסיף מחרוזות חדשות לפני העלאה לפרודקשן. כך תוכל למנוע ממישהו לגנוב את מפתח ה-API הסודי שלך, ועלול למנוע תפיחה מיותרת של פרויקט התרגום שלך על ידי הוספת מחרוזות חדשות שאינן קשורות.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!

מוצר מ־Nattskiftetתוצרת נורווגיה