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

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

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

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

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

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

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

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

npm install tacotranslate

ګام 2: یو وړیا 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. د اصل ځای (origin) په اړه نور دلته ولولئ.

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!"/>
}

ګام ۵: ځای پر ځای کړئ او ازموینه وکړئ!

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

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

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