څنګه په 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: د اصلي (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 کیلي ښکاره کړي. که موږ په محلي، ازمایښتي، یا سټیجینګ چاپیریال کې یو (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 کمپونینټ ته اضافه کړئ. یادونه: یوازې هغه چاپیریالونه چې په 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!