په هغه 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

ګام ۲: یو وړیا 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'; ښيي چې دا یو کلاینت کمپوننټ دی.

اوس چې د کانټکسټ پرووایډر چمتو دی، یو فایل جوړ کړئ چې نوم یې /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 ته وايي پاڼه د 60 ثانیو وروسته بیا جوړ کړي، او ستاسو ژباړې تازه وساتي.

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

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 کوکي بدل کړئ څو د کارونکي غوره شوې ژبه وټاکئ. د دې د څرنګوالي لپاره، مهرباني وکړئ د بشپړ بېلګې کوډ وګورئ!

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

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