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

څرنګه چې نړۍ ورځ تر بلې نړیواله کېږي، نو د ویب پراختیا کونکو لپاره دا لا ډېر مهم شوی چې داسې غوښتنلیکونه جوړکړي چې د بېلابېلو هېوادونو او کلتورونو کاروونکو اړتیاوې پوره کړي.

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

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

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

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

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

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

npm install tacotranslate

ګام 2: یو وړیا TacoTranslate حساب جوړ کړئ

اوس چې مو ماډیول نصب کړ، نو وخت رارسېدلی چې خپل TacoTranslate حساب، د ژباړې پروژه، او اړوندې API کیلي جوړ کړئ. دلته یو حساب جوړ کړئ. دا وړیا دی، او تاسو ته اړتیا نشته چې کریډیټ کارت اضافه کړئ.

د TacoTranslate د غوښتنلیک په کارن-انترفیس کې، یو پروژه جوړه کړئ، او د هغې د 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. دلته د 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 ډاډمن کوي چې ستاسو د پروژې لپاره فعال ټول محلي ژبې کوډونه مخکې له مخکې رینډر شوي دي.

اوس راځئ چې زموږ لومړۍ پاڼه جوړه کړو! یو فایل جوړ کړئ چې نوم یې /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 اجازې ولري، وتوانېږي نوي متنونه رامنځته کړي چې ژباړل شي. موږ سپارښتنه کوو چې یو تړلی او خوندي د ازموینې چاپېریال ولرئ چیرې چې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې 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!