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

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

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

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

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

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

TacoTranslate ستاسو د تارونو ژباړه په اوتومات ډول هرې ژبې ته د پرمختللي AI په کارولو سره کوي، او تاسو له د 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 کیلي ښکاره کړي. که موږ په یوه محلي، ازمویښتي، یا staging چاپیریال کې یو (isProduction is false)، موږ به د پټ read/write API کیلي وکاروو ترڅو ډاډ ترلاسه کړو چې نوي سلسلې د ژباړې لپاره واستول شي.

تر دې دمه، مونږ یوازې د Next.js غوښتنلیک د ملاتړ شویو ژبو لیست سره تنظیم کړی دی. بل کار چې مونږ یې کوو هغه د ستاسو د ټولو پاڼو لپاره ژباړې ترلاسه کول دي. د دې لپاره، تاسو به یا getTacoTranslateStaticProps یا getTacoTranslateServerSideProps د خپلو اړتیاوو پراساس وکاروئ.

دا فنکشنونه درې ارګومینټونه اخلي: یو Next.js Static Props Context شی، د TacoTranslate لپاره ترتیب، او اختیاري Next.js ځانګړتیاوې. یادونه وکړئ چې revalidate په getTacoTranslateStaticProps کې په ډیفالټ ډول پر ۶۰ ټاکل شوی، ترڅو ستاسو ژباړې تازه پاتې شي.

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

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

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