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

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

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

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

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

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

TacoTranslate ستاسو متنونه په اتومات ډول هرې ژبې ته د پرمختللې مصنوعي ځیرکتیا په مرسته ژباړي، او تاسو د 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: د ډیفالټ شاتګ (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 اجازې ورکړل شوې وي، کولی شي د ژباړې لپاره نوي متنونه جوړ کړي. موږ سپارښتنه کوو چې یو تړلی او خوندي ازمېښتي چاپېریال ولرئ چیرې چې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې یوې API کیلي سره وازمویئ، او له ژوندۍ کېدو وړاندې نوي متنونه اضافه کړئ. دا به هیڅوک هیڅوک د دې څخه مخنیوی وکړي چې ستاسو پټ API کیلي غلا کړي، او ممکن ستاسو د ژباړې پروژه د نوو، بې ارتباطه متنونو په اضافه کولو سره پراخه (بلاټ) کړي.

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

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