په یوه 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 کمپونینټ ته اضافه کړئ. په یاد ولرئ چې یوازې هغه چاپیریالونه چې د read/write اجازو سره د API کیلي لري، نوي تارونه د ژباړې لپاره جوړولی شي. موږ وړاندیز کوو چې یو تړلی او خوندي staging چاپیریال ولرئ چیرې چې تاسو کولی شئ خپل تولیدي غوښتنلیک د API کیلي سره ازمویئ، د ژوند کولو مخکې نوي تارونه اضافه کولو سره. دا به د چا هم مخه ونیسي چې ستاسو پټ API کیلي غلا کړي، او ممکن ستاسو د ژباړې پروژه د نوي، بې اړوند تارونو په زیاتولو سره ډکه کړي.

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

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