כיצד ליישם אינטרנשיונליזציה ביישום Next.js שמשתמש ב-Pages Router

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

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

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

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

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

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

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

npm install tacotranslate

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

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

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: קוד האזור (locale) המוגדר כברירת מחדל למקרה של כישלון. בדוגמה זו, נגדיר אותו ל-en לאנגלית.
• TACOTRANSLATE_ORIGIN: ה"תיקייה" שבה יאוחסנו המחרוזות שלך, כגון כתובת האתר שלך. קרא עוד על origins כאן.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

שלב 3: הקמת TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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.

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.

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 on getTacoTranslateStaticProps מוגדר כברירת מחדל ל-60, כך שהתרגומים שלך יישארו מעודכנים.

כדי להשתמש בכל אחת מהפונקציות בדף, נניח שיש לך קובץ עמוד כמו /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: תפוס לפרוס ולבדוק!

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

ודאו לעיין בדוגמה המלאה בפרופיל GitHub שלנו. שם, תוכלו גם למצוא דוגמה כיצד לעשות זאת באמצעות App Router ! אם תיתקלו בבעיות כלשהן, אל תהססו לפנות אלינו, ונשמח מאוד לעזור.

TacoTranslate מאפשרת לכם לתרגם אוטומטית את יישומי React שלכם במהירות לכל שפה ולהיפך. התחילו עוד היום!