بهترین راه‌حل برای بین‌المللی‌سازی (i18n) در برنامه‌های Next.js

چگونه کار می‌کند

همزمان با جهانی‌تر شدن دنیا، برای توسعه‌دهندگان وب هر چه بیشتر اهمیت پیدا می‌کند که برنامه‌هایی بسازند که بتوانند پاسخگوی کاربران از کشورهای مختلف و فرهنگ‌های گوناگون باشند. یکی از راه‌های اصلی برای رسیدن به این هدف، بین‌المللی‌سازی (i18n) است که به شما امکان می‌دهد برنامه خود را به زبان‌ها، ارزها، و فرمت‌های تاریخ مختلف سازگار کنید.

در این آموزش، نحوه افزودن بین‌المللی‌سازی به برنامه React Next.js خود را با رندر سمت سرور بررسی خواهیم کرد. TL;DR: نمونه کامل را اینجا ببینید.

این راهنما برای برنامه‌های Next.js است که از Pages Router استفاده می‌کنند.
اگر از App Router استفاده می‌کنید، لطفاً به جای آن این راهنما را مشاهده کنید.

مرحله ۱: یک کتابخانه i18n نصب کنید

برای پیاده‌سازی بین‌المللی‌سازی در برنامه Next.js خود، ابتدا یک کتابخانه i18n انتخاب خواهیم کرد. چندین کتابخانه محبوب وجود دارد، از جمله next-intl. با این حال، در این مثال، ما از TacoTranslate استفاده خواهیم کرد.

TacoTranslate به طور خودکار رشته‌های شما را به هر زبانی با استفاده از هوش مصنوعی پیشرفته ترجمه می‌کند و شما را از مدیریت خسته‌کننده فایل‌های JSON آزاد می‌سازد.

بیایید آن را با استفاده از npm در ترمینال خود نصب کنیم:

npm install tacotranslate

گام ۲: یک حساب رایگان در 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: «پوشه‌ای» که رشته‌های شما در آن ذخیره می‌شوند، مانند آدرس وب‌سایت شما. اینجا دربارهٔ مبدأها بیشتر بخوانید.

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

مرحله ۳: راه‌اندازی 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 سفارشی دارید، لطفاً تعریف را با خصوصیات و کدهای بالا گسترش دهید.

مرحله ۴: پیاده‌سازی رندر سمت سرور

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 API استفاده خواهیم کرد تا اطمینان حاصل کنیم که رشته‌های جدید برای ترجمه ارسال می‌شوند.

تاکنون، ما فقط برنامه Next.js را با فهرستی از زبان‌های پشتیبانی شده راه‌اندازی کرده‌ایم. قدم بعدی این است که ترجمه‌ها را برای همه صفحات شما دریافت کنیم. برای این کار، بسته به نیازهای خود، از یکی از موارد getTacoTranslateStaticProps یا getTacoTranslateServerSideProps استفاده خواهید کرد.

این توابع سه آرگومان می‌گیرند: یک شیء Next.js Static Props Context, پیکربندی برای TacoTranslate، و ویژگی‌های اختیاری Next.js. توجه داشته باشید که مقدار revalidate در getTacoTranslateStaticProps به طور پیش‌فرض روی ۶۰ تنظیم شده است، تا ترجمه‌های شما به‌روز بمانند.

برای استفاده از هر یک از این توابع در یک صفحه، فرض کنیم شما یک فایل صفحه مانند /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!"/>
}

مرحله ۵: استقرار دهید و آزمایش کنید!

ما کار را به پایان رساندیم! حالا برنامه Next.js شما به طور خودکار ترجمه خواهد شد وقتی که هر رشته‌ای را به کامپوننت Translate اضافه کنید. توجه داشته باشید که تنها محیط‌هایی که دارای مجوزهای read/write روی کلید API هستند قادر خواهند بود رشته‌های جدیدی برای ترجمه ایجاد کنند. ما توصیه می‌کنیم یک محیط staging بسته و امن داشته باشید که در آن بتوانید برنامه تولیدی خود را با چنین کلید 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!