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

لکه څنګه چې نړۍ نړيواله کېدونکې ده، د ويب پراختياکوونکو لپاره دا تر هر وخت ډېر مهمه شوې چې داسې تطبيقونه جوړ کړي چې د بېلابېلو هېوادونو او کلتورونو کاروونکو ته خدمت وړاندې کولی شي.

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

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

لومړی ګام: یو i18n کتابتون نصب کړئ

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

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

راځئ چې دا په خپل ترمینل کې د npm په کارولو سره انسټال کړو:

npm install tacotranslate

ګام 2: یو وړیا 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 ځانګړتیاوې. یادونه: په getTacoTranslateStaticProps کې revalidate په ډیفالټ توګه په 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!"/>
}

ګام 5: خپروئ او ازموینه وکړئ!

موږ بشپړ کړل! ستاسو د React غوښتنلیک به اوس په اوتومات ډول ژباړل کېږي کله چې تاسو هر ډول متنونه په Translate کمپوننټ کې اضافه کړئ. یاده دې وي چې یوازې هغه چاپیریالونه چې د API کیلي لپاره read/write اجازې لري، کولی شي نوي متنونه جوړ کړي چې ژباړل شي. موږ سپارښتنه کوو چې یو تړلی او خوندي staging چاپیریال ولرئ چېرې تاسو خپل تولیدي غوښتنلیک د داسې یوې API کیلي سره ازمویلای شئ، او د خپرېدو مخکې نوي متنونه اضافه کړئ. دا به مخه ونیسي چې څوک څوک ستاسو پټه API کیلي غلا کړي، او احتمال شته چې ستاسو د ژباړې پروژه د بې‌اړوند او نوي متنونو په اضافه کولو سره پړسوي.

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

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