د Next.js اپلیکیشنونو لپاره د نړیوالولو (i18n) غوره حل

څنګه کار کوي

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

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

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

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

د خپل Next.js غوښتنلیک کې د نړیوال کولو (i18n) د پلي کولو لپاره، موږ به لومړی یو 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: د ډیفالټ بېرته راستنیدونکي (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 ستاسو د ژباړو لپاره د سرور-خوا رینډرینګ (server-side rendering) اجازه ورکوي. دا د کارونکي تجربه په پراخه توګه ښه کوي، ځکه چې ژباړل شوې منځپانګه سمدلاسه ښودل کېږي، پر ځای د دې چې لومړی د بې‌ژباړې منځپانګې یوه لنډه څرګندېدل وښيي. سربېره پر دې، موږ کولی شو په کلاینت کې د شبکې غوښتنې پریږدو، ځکه چې ټولې اړینې ژباړې مو له مخکې شته.

موږ به د /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!"/>
}

ګام ۵: پلې کړئ او آزموینه وکړئ!

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!