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

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

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

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

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

د خپل Next.js اپلیکیشن کې د نړیوال کولو لپاره، لومړی به یو i18n کتابتون انتخاب کړو. څو مشهور کتابتونونه شته، په ګډون د next-intl. په دې مثال کې، موږ به بیا هم د 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 کیلي غلا نه کړي، او امکان لري ستاسو د ژباړې پروژه د بې ارتباطه نوو تارونو په زیاتولو سره نه خپره شي.

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!