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

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

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

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

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

כדי ליישם בינלאומיות ביישום 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 בשורש הפרויקט שלך.

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 כאן.

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

שלב 3: הגדרת TacoTranslate

כדי לשלב את TacoTranslate באפליקציה שלך, תצטרך ליצור client באמצעות מפתחות ה-API שיצרת קודם לכן. לדוגמה, צור קובץ בשם /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), נשתמש במפתח הסודי read/write כדי לוודא שמחרוזות חדשות נשלחות לתרגום.

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

פונקציות אלו מקבלות שלושה ארגומנטים: אובייקט אחד של Next.js Static Props Context, קונפיגורציה ל-TacoTranslate, ופרופרטיז אופציונליים של Next.js. שימו לב ש-revalidate ב-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 תוכלנה ליצור מחרוזות חדשות לתרגום. אנו ממליצים על סביבה סגורה ומאובטחת לסטייג'ינג שבה תוכל לבחון את אפליקציית הייצור שלך עם מפתח API כזה, ולהוסיף מחרוזות חדשות לפני העלאתה לאוויר. זה ימנע מאחרים לגנוב את מפתח ה-API הסודי שלך, ועלול למנוע מהפרויקט שלך להתרחב מיותרות מחרוזות חדשות שאינן קשורות.

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

TacoTranslate מאפשרת לכם לאנצל אוטומטית את אפליקציות React שלכם במהירות מכל שפה ולכל שפה. התחילו היום!