הפתרון הטוב ביותר לאינטארנציונליזציה (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
ששוכן בשורש הפרויקט שלך.
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 עם היישום שלך, תצטרך ליצור לקוח באמצעות מפתחות ה-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
), נשתמש במפתח ה-API הסודי של 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: פרוס ובדוק!
סיימנו! אפליקציית 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!