چگونه بین‌المللی‌سازی را در یک اپلیکیشن Next.js که از App Router استفاده می‌کند، پیاده‌سازی کنیم

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

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

این راهنما برای برنامه‌های Next.js است که از App Router استفاده می‌کنند.
اگر از Pages 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

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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

ما به زودى به طور خودکار TACOTRANSLATE_API_KEY و TACOTRANSLATE_PROJECT_LOCALE را تعریف خواهیم کرد.

ایجاد کلاینت در یک فایل جداگانه، استفاده مجدد از آن را بعدا آسان می کند. getLocales فقط یک عملکرد کاربردی با برخی از خطاهای داخلی است. اکنون، فایلی به نام /app/[locale]/tacotranslate.tsxایجاد کنید، جایی که ارائه دهنده TacoTranslate را پیاده سازی می کنیم.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

توجه داشته باشید که 'use client'; نشان می‌دهد که این یک مولفه کلاینت است.

با آماده شدن فراهم‌کننده‌ی زمینه، یک فایل به نام /app/[locale]/layout.tsx ایجاد کنید، که طرح ریشه‌ای در برنامه‌ی ما است. توجه داشته باشید که این مسیر دارای یک پوشه است که از Dynamic Routes استفاده می‌کند، جایی که [locale] پارامتر پویا است.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

اولین نکته‌ای که باید در اینجا به آن توجه کنید این است که ما از پارامتر Dynamic Route خود یعنی [locale] برای دریافت ترجمه‌ها برای آن زبان استفاده می‌کنیم. علاوه بر این، generateStaticParams اطمینان حاصل می‌کند که همه کدهای محلی که در پروژه خود فعال کرده‌اید، پیش از رندر شدن آماده باشند.

حال بیایید اولین صفحه خود را بسازیم! یک فایل به نام /app/[locale]/page.tsx ایجاد کنید.

import React from 'react';
import {Translate} from 'tacotranslate/react';

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

توجه داشته باشید که متغیر revalidate به Next.js می‌گوید صفحه را پس از ۶۰ ثانیه دوباره بسازد و ترجمه‌های شما را به‌روز نگه دارد.

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

TacoTranslate از رندر سمت سرور پشتیبانی می‌کند. این به طور چشمگیری تجربه کاربری را بهبود می‌بخشد زیرا محتوای ترجمه شده را فوراً نمایش می‌دهد، به جای اینکه ابتدا یک لحظه محتوای ترجمه نشده دیده شود. علاوه بر این، می‌توانیم درخواست‌های شبکه‌ای در سمت مشتری را نادیده بگیریم، چون ترجمه‌هایی را که برای صفحه‌ای که کاربر مشاهده می‌کند نیاز داریم، از قبل داریم.

برای راه‌اندازی رندرینگ سمت سرور، فایل /next.config.js را ایجاد یا ویرایش کنید:

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

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

تغییر بررسی isProduction مطابق با تنظیمات خود انجام دهید. اگر true باشد، TacoTranslate کلید API عمومی را نمایش خواهد داد. اگر ما در یک محیط محلی، تست یا مرحله آزمایشی هستیم (isProduction is false)، از کلید API مخفی read/write استفاده خواهیم کرد تا اطمینان حاصل کنیم که رشته‌های جدید برای ترجمه ارسال می‌شوند.

برای اطمینان از اینکه مسیر‌یابی و هدایت مجدد همانطور که انتظار می‌رود کار می‌کند، لازم است فایلی با نام /middleware.ts ایجاد کنیم. با استفاده از Middleware, می‌توانیم کاربران را به صفحاتی هدایت کنیم که به زبان مورد علاقه‌شان نمایش داده می‌شوند.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

حتماً matcher را مطابق با مستندات Middleware در Next.js تنظیم کنید.

در سمت کلاینت، شما می‌توانید کوکی locale را تغییر دهید تا زبان مورد علاقه کاربر را تغییر دهید. لطفاً برای دریافت ایده‌ها در مورد این کار، به کد نمونه کامل مراجعه کنید!

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

ما کار را به پایان رساندیم! اکنون برنامه React شما به صورت خودکار ترجمه خواهد شد زمانی که هر متنی را به یک کُمپوننت Translate اضافه کنید. توجه داشته باشید که تنها محیط‌هایی که دسترسی read/write روی کلید API دارند قادر خواهند بود رشته‌های جدیدی برای ترجمه ایجاد کنند. ما توصیه می‌کنیم یک محیط مرحله‌بندی بسته و ایمن داشته باشید که در آن بتوانید برنامه تولید خود را با چنین کلید API تست کنید و پیش از راه‌اندازی، رشته‌های جدید اضافه نمایید. این کار از دزدیده شدن کلید API مخفی شما جلوگیری کرده و از رشد بیش از حد پروژه ترجمه شما با اضافه کردن رشته‌های جدید و نامرتبط جلوگیری می‌کند.

حتماً به نمونه کامل در پروفایل GitHub ما سر بزنید. آنجا همچنین یک نمونه خواهید یافت که نشان می‌دهد چگونه این کار را با استفاده از Pages Router انجام دهید! اگر با مشکلی مواجه شدید، آزادانه تماس بگیرید و ما با کمال میل آماده کمک خواهیم بود.

TacoTranslate به شما این امکان را می‌دهد که برنامه‌های React خود را به‌طور خودکار و سریع به هر زبانی و از هر زبانی بومی‌سازی کنید. امروز شروع کنید!