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

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

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

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

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

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

TacoTranslate ستاسو د سترینګونو اتوماتیک ژباړه د هرې ژبې لپاره د پرمختللې AI په کارولو سره کوي، او تاسو د 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 ته وايي پاڼه د ۶۰ ثانیو وروسته بیا جوړ کړي، او ستاسو ژباړې تازه وساتي.

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

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 documentation سره سم تنظیم کړئ.

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

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

موږ بشپړ کړل! ستاسو React غوښتنلیک به اوس په اوتومات ډول ژباړل کیږي کله چې تاسو هر ډول لیکنې ته د Translate کمپونینټ کې ځای ورکړئ. یادونه وکړئ چې یوازې هغه چاپیریالونه چې د API کیلي لپاره read/write اجازه لري، وکولی شي نوي لیکنې د ژباړې لپاره رامنځته کړي. موږ سپارښتنه کوو چې یو تړلی او خوندي ازمایښتي چاپیریال ولرئ چیرې چې تاسو خپل تولیدي غوښتنلیک د داسې API کیلي سره وازمایئ، مخکې له دې چې ژوندۍ بڼه ورکړئ نوي لیکنې اضافه کړئ. دا به د چا لخوا ستاسو پټ API کیلي غلا کیدو مخه ونیسي، او ممکن ستاسو د ژباړې پروژه د نوي، غیر اړونده لیکنو په زیاتولو سره ډکه نه کړي.

ډاډ ترلاسه کړئ چې زموږ د GitHub پروفایل کې بشپړ مثال وګورئ check out the complete example. هلته به تاسو د Pages Router کارولو له لارې د دې ترسره کولو بیلګه هم ومومئ! که کومه ستونزه مخې ته راغله، مهرباني وکړئ په آزاده توګه اړیکه ونیسئ reach out، او موږ به ستاسو د مرستې لپاره ډیر خوښ یو.

TacoTranslate تاسو ته اجازه درکوي چې خپل React غوښتنلیکونه په اوتومات ډول هرې ژبې ته او له هغې څخه ژر تر ژره محلي کړئ. نن پیل وکړئ!