څنګه په 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 کیليو ټب ته لاړ شئ. یو 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 ځانګړتیاوې. یاد ولرئ چې revalidate په getTacoTranslateStaticProps کې په بنسټیز ډول پر 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 اجازې لري، کولی شي د ژباړې لپاره نوي متون جوړ کړي. موږ وړاندیز کوو چې یو تړلی او خوندي staging چاپېریال ولرئ چیرته چې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې یوې API کیلي سره ازمویئ او مخکې له خپریدو نوي متون پکې اضافه کړئ. دا به د دې مخه ونیسي چې هر څوک هر څوک ستاسو پټ API کیلي غلا کړي، او احتمال لري ستاسو د ژباړې پروژه د نوي، غیر اړونده متونونو په زیاتولو سره پراخه او بې‌فايده شي.

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

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