څنګه په 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 غوښتنلیکونه په اوتومات ډول او په چټکۍ سره له ۷۵ څخه زیاتو ژبو ته او له هغو څخه محلي کړئ. نن پیل وکړئ!