څنګه په 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: د ډیفالټ بدیل سیمه ییز کوډ. په دې بېلګه کې، موږ به دا د انګلیسي لپاره 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 په افتراضي ډول ۶۰ ته ټاکل شوی دی، تر څو ستاسو ژباړې تازه پاتې شي.

د یوې پاڼې په فایل کې د هرې دې دندې د کارولو لپاره، فرض کړئ چې تاسو د پاڼې یو فایل لرئ لکه /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 څخه زیاتو ژبو ته او له هغو ژبو څخه محلي کړي. همدا نن پیل کړئ!