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

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

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

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

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