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

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

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

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

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

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

TacoTranslate ستاسې متنونه په هر ژبه کې د نوې AI ټیکنالوژۍ په کارولو سره اتوماتیک ژباړنه کوي، او تاسې د JSON فایلونو ستړي کوونکي مدیریت څخه خلاصوي.

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

npm install tacotranslate

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

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

د TacoTranslate غوښتنې UI کې، یو پروژه جوړه کړئ، او د هغې API keys ټب ته لاړ شئ. یو 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 تنظیمول

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 کمپونینټ ته اضافه کړئ. یادونه وکړئ چې یوازې هغه چاپیریالونه چې د read/write اجازه لیکونه په API کیلي لري، د نوي متنونو د ژباړې لپاره جوړولو توان لري. موږ وړاندیز کوو چې یو تړل شوی او خوندي مرحله ییز چاپیریال ولرئ چیرې چې کولی شئ خپل تولیدي غوښتنلیک د همدې ډول API کیلي سره ازموینه وکړئ، مخکې له دې چې ژوندۍ ته لاړ شئ نوي متنونه اضافه کړئ. دا به د چا څخه چې ستاسو پټ API کیلي غلا کوي مخنیوی وکړي، او کیدای شي ستاسو د ژباړې پروژه د نوي، بې تړاو متنونو د زیاتوالي له امله ډکه نه کړي.

باور وکړئ چې زموږ د ګیټ هب پروفایل کې مکمل مثال وګورئ. هلته به تاسو د دې کار کولو یوه بېلګه هم ومومئ چې د Pages Router په کارولو سره دی! که کومه ستونزه پېښه شوه، نو مهرباني وکړئ آزادانه یې له موږ سره د ايميل له لارې اړیکه ونیسئ، او موږ به ډېر خوښ شو چې مرسته وکړو.

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