څنګه په هغه Next.js غوښتنلیک کې نړيوالیز (internationalization) پلي کړو چې د App Router کاروي؟

لکه څنګه چې نړۍ زیات نړیوالېږي، د ویب پراختیاګرانو لپاره دا ورځ تر بلې مهمه کېږي چې داسې غوښتنلیکونه جوړ کړي چې د بېلابېلو هیوادونو او کلتورونو کاروونکو ته خدمت وکړای شي. د دې د ترلاسه کولو له مهمو لارو څخه یوه د نړیوالولو (i18n) کارول دي، چې تاسو ته اجازه درکوي خپل غوښتنلیک بېلابېلو ژبو، پېسو واحدونو، او د نیټې بڼو سره سمون ورکړئ.

په دې مقاله کې به موږ وڅېړو چې څنګه خپل React Next.js غوښتنلیک ته د سرور-سایډ رینډرنګ سره نړیوالوالې اضافه کړو. TL;DR: دلته بشپړ بېلګه وګورئ.

دا لارښود د هغو Next.js غوښتنلیکونو لپاره دی چې App Router کاروي.
که تاسو Pages Router کاروئ، پر ځای یې دا لارښود وګورئ.

ګام 1: د i18n یو کتابتون نصب کړئ

ستاسو په Next.js غوښتنلیک کې د نړیوالولو (i18n) د پلي کولو لپاره، موږ به لومړی یو i18n کتابتون وټاکو. څو مشهور کتابتونونه شته، چې پکې next-intl هم شامل دی. خو په دې مثال کې، موږ به د TacoTranslate څخه کار واخلو.

TacoTranslate ستاسو متنونه په اتوماتيک ډول د پرمختللې مصنوعي ځیرکتیا په مرسته هرې ژبې ته ژباړي، او تاسو له د JSON فایلونو ستړي کوونکي مدیریت څخه خلاصوي.

راځئ چې دا د npm په خپل ترمینل کې نصب کړو:

npm install tacotranslate

ګام ۲: د TacoTranslate وړیا حساب جوړ کړئ

اوس چې تاسو ماډیول نصب کړی دی، نو اوس وخت دی چې خپل TacoTranslate حساب، د ژباړې پروژه، او اړوند API کیلي جوړ کړئ. دلته حساب جوړ کړئ. دا وړیا دی، او تاسو ته د کریډیټ کارت ورکولو اړتیا نشته.

د TacoTranslate د غوښتنلیک UI دننه، یوه پروژه جوړ کړئ او د هغې د API کیليو ټب ته لاړ شئ. یو read کیلي جوړه کړئ، او یو read/write کیلي هم. موږ به یې د چاپېریال متغیرو په توګه وساتو. د read کیلي هغه ده چې موږ یې public وایو، او د read/write کیلي بیا secret ده. د بېلګې په توګه، تاسو کولی شئ دوی د پروژې په ریښه کې په یوې .env فایل کې اضافه کړئ.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

ډاډ ترلاسه کړئ چې محرم read/write API کیلي هیڅکله د کلاینت اړخ تولیدي چاپیریالونو ته نه افشا کېږي.

موږ به هم دوه نور د چاپېریال متغیرونه اضافه کړو: TACOTRANSLATE_DEFAULT_LOCALE او TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: د ډیفالټ (fallback) سیمه‌ییز کوډ. په دې مثال کې به موږ دا د انګلیسي لپاره په en وټاکو.
• TACOTRANSLATE_ORIGIN: هغه «فولډر» چېرې ستاسو متنونه به پکې وساتل شي، لکه د ستاسو ویب‌پاڼې URL. دلته د 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_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 وي، چې زموږ په غوښتنلیک کې د ریښې ترتیب (root layout) دی. په یاد ولرئ چې دا لار یوه فولډر کاروي چې 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 ته وايي چې پاڼه د 60 ثانیو وروسته بیا جوړ کړي، او ستاسو ژباړې تازه وساتي.

څلورم ګام: د سرور په اړخ رینډرینګ پلي کول

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 کیلي څرګنده کړي. که موږ په محلي، د ازموینې، یا د staging چاپېریال کې یو (isProduction is false)، موږ به د پټ read/write API کیلي وکاروو څو ډاډ ترلاسه کړو چې نوي متنونه د ژباړې لپاره واستول شي.

د دې لپاره چې ډاډ ترلاسه کړو چې د لارې ټاکنه او بیا لارښوونه په تمه شوي ډول کار کوي، موږ اړتیا لرو چې د /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 د Next.js Middleware اسنادو سره سم تنظیم کړئ.

په کلاینت کې، تاسو کولی شئ د locale کوکي بدل کړئ څو د کارونکي غوره شوې ژبه وټاکل شي. مهرباني وکړئ د دې د ترسره کولو د لارو لپاره د بشپړې بېلګې کوډ وګورئ!

ګام ۵: خپرول او ازموینه!

موږ بشپړ کړل! ستاسو React اپلیکیشن به اوس په اوتومات ډول ژباړل کېږي کله چې تاسو کوم متن په Translate کمپوننټ کې اضافه کړئ. یادونه: یواځي هغه چاپېریالونه چې د API کیلي لپاره د read/write اجازې ولري، وتوانېږي د ژباړې لپاره نوي متنونه جوړ کړي. موږ سپارښتنه کوو چې یو تړلی او خوندي سټیجینګ چاپېریال ولرئ، چیرې چې تاسو کولی شئ خپل تولیدي اپلیکیشن د ورته 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 Pages 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!