په هغه Next.js اپلیکیشن کې چې Pages Router کاروي، د نړيوالیزې پلي کولو څرنګوالی

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

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

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

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

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

TacoTranslate په اتومات ډول ستاسو متنونه هرې ژبې ته د پرمختللې مصنوعي ځیرکتیا په کارولو سره ژباړي، او تاسو د 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: د ډیفالټ شاتګ (fallback) محلي ژبې کوډ. په دې بېلګه کې به موږ دا د انګلیسي لپاره (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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

موږ به ژر په اوتومات ډول TACOTRANSLATE_API_KEY تعریف کړو.

په یوه جلا فایل کې د کلاینت جوړول وروسته یې بیا کارول اسانه کوي. اوس، د یو دودیز /pages/_app.tsx په کارولو سره، موږ به د TacoTranslate چمتوونکی اضافه کړو.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

که تاسو لا دمخه دودیز pageProps او _app.tsx لرئ، مهرباني وکړئ د پورته یادو ځانګړتیاوو او کوډ سره تعریف غځ کړئ.

څلورم ګام: د سرور اړخ رینډر پلي کول

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

موږ به د /next.config.js په جوړولو یا ترمیمولو پیل وکړو.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

د isProduction چک د خپل تنظیم سره سم تعدیل کړئ. که true وي، TacoTranslate به د عامه API کیلي څرګنده کړي. که موږ په محلي، ازمایښتي، یا سټیجینګ چاپیریال کې یو (isProduction is false)، موږ به د پټ read/write API کیلي وکاروو ترڅو ډاډ ترلاسه شي چې نوې سټرینګونه د ژباړې لپاره واستول شي.

تر دې دمه، موږ یوازې د Next.js غوښتنلیک د ملاتړ شویو ژبو لیست تنظیم کړی دی. بل څه چې به یې وکړو دا دی چې د ټولو پاڼو لپاره ژباړې ترلاسه کړو. د دې لپاره، تاسو به د خپلو اړتیاوو پر اساس یا getTacoTranslateStaticProps یا getTacoTranslateServerSideProps وکاروئ.

دا فنکشنونه درې استدلالونه اخلي: یو Next.js Static Props Context شی، د TacoTranslate لپاره تنظیمات، او اختیاري Next.js ځانګړتیاوې. یادونه وکړئ چې په getTacoTranslateStaticProps کې revalidate په ډیفالټ ډول 60 ته ټاکل شوی، ترڅو ستاسو ژباړې تازه پاتې شي.

د هر یو فنکشن د یوې پاڼې په فایل کې د کارولو لپاره، فرض کړئ چې تاسو داسې یو پاڼې فایل لرئ: /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

تاسو اوس باید وکولای شئ د Translate کمپوننټ وکاروئ ترڅو د خپلو ټولو React کمپوننټونو متنونه وژباړئ.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ګام 5: خپرول او ازموینه وکړئ!

موږ بشپړ کړل! ستاسو د React غوښتنلیک به اوس په اوتومات ډول ژباړل کېږي کله چې تاسو هر ډول متنونه د Translate کمپونینټ ته اضافه کړئ. یاد ولرئ چې یوازې هغه چاپېریالونه چې د API کیلي لپاره یې read/write اجازه‌وې ولري، کولی شي نوې متنونه رامنځته کړي چې ژباړل شي. موږ سپارښتنه کوو چې یو تړلی او خوندي staging چاپېریال ولرئ، چیرې چې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې یوې API کیلي سره وازمویئ او مخکې له دې چې ژوندۍ یې کړئ نوې متنونه پکې اضافه کړئ. دا به د چا له خوا ستاسو پټه API کیلي د غلا کېدو مخنیوی وکړي او همدارنګه به ستاسو د ژباړې پروژه د نوي او غیر اړونده متنونو د بې‌ځایه ډکېدو څخه وساتي.

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

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