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

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

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

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

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

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

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

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

npm install tacotranslate

Step 2: یو وړیا TacoTranslate حساب جوړ کړئ

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

د TacoTranslate په غوښتنلیک UI کې، یو پروژه جوړه کړئ، او د هغې د API keys ټب ته لاړ شئ. یو 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. د Origins په اړه نور ولولئ.

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, چې زموږ د اپلیکیشن د اصلي لې‌آوټ په توګه دی. په یاد ولرئ چې دا لار یوه فولډر کاروي چې په کې 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 ډاډ ترلاسه کوي چې ستاسو د پروژې لپاره فعال شوي ټول locale کوډونه مخکې له مخکې رینډر شوي دي.

اوس راځئ چې خپله لومړۍ پاڼه جوړه کړو! یو فایل جوړ کړئ چې نوم یې /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)، موږ به د نوو متنونو د ژباړې لپاره د لیږلو ډاډ ترلاسه کولو لپاره پټه 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 کوکي بدل کړئ ترڅو د کارونکي غوره شوې ژبه بدله کړئ. مهرباني وکړئ د دې د ترسره کولو لارو لپاره بشپړ مثال کوډ وګورئ!

ګام 5: پلي کړئ او ازموینه وکړئ!

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