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

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

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

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

ګام ۱: د i18n کتابتون نصب کړئ

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

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

راځئ چې دا د خپلو فرمان لیک (terminal) کې د npm په کارولو نصب کړو:

npm install tacotranslate

ګام ۲: یوه وړیا TacoTranslate حساب جوړ کړئ

اوس چې تاسو ماډل نصب کړ، نو وخت دی چې خپل TacoTranslate حساب جوړ کړئ، د ژباړې پروژه او اړوند API کیلي ګانې جوړې کړئ. دلته حساب جوړ کړئ. دا وړیا دی، او د دې لپاره اړتیا نشته چې د کریډیټ کارت معلومات ورکړئ.

د TacoTranslate غوښتنلیک UI کې، یو پروژه جوړ کړئ، او د هغې د API کیليو ټب ته لاړ شئ. یو read کیلي جوړ کړئ، او یو read/write کیلي. موږ به دوی د چاپیریال متغیرونو (environment variables) په توګه ذخیره کړو. د 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 کیلي د غلا کیدو مخنیوی وکړي، او احتمالي ستاسو د ژباړې پروژه د نوي، بې تړاوو ټکو په اضافه کولو سره دروند نه کړي.

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

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