په یوه 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 سندونو سره سم ترتیب کړئ.

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

مرحله ۵: نشر او ازموینه!

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