په یوه 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 غوښتنلیک 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: د ډیفالټ فالبیک ځایي کوډ. په دې مثال کې، موږ به یې د انګلیسي لپاره en وټاکو.
• TACOTRANSLATE_ORIGIN: هغه "فولدر" چې ستاسو لیکې به پکې زیرمه شي، لکه د ستاسو د ویب پاڼې URL. دلته د اصلونو په اړه نور ولولئ.

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'; چې څرگندوي دا د کلاینټ برخه ده۔

د context provider اوس چمتو دی، یو فایل جوړ کړئ چې نوم یې /app/[locale]/layout.tsx دی، زموږ په غوښتنلیک کې اصلي 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 ته وایي پاڼه د ۶۰ ثانیو وروسته بیا جوړ کړي، او ستاسو ژباړې تازه وساتي.

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

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 کمپونینټ ته اضافه کړئ. پام وکړئ چې یوازې هغه چاپیریالونه چې د 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 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!