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

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

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

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

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

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

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

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

npm install tacotranslate

ګام 2: د 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. دلته د سرچینو (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 ته وایي پاڼه د 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 کوکي بدل کړئ څو د کارونکي خوښه شوې ژبه بدل کړئ. مهرباني وکړئ د دې د ترسره کولو د طریقو لپاره د بشپړ مثال کوډ وګورئ!

پنځم ګام: خپر کړئ او ازموینه وکړئ!

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