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

څنګه کار کوي

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

په دې لارښود کې به موږ وڅېړو چې څنګه خپل React Next.js غوښتنلیک ته د سرور-سایډ رینډرینګ سره نړیوالتیا (i18n) اضافه کړئ. 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 لرئ، مهرباني وکړئ د تعریف په برخه کې پورته یادې شوې ځانګړتیاوې او کوډ اضافه کړئ.

ګام 4: د سرور اړخ رینډرینګ پلي کول

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!"/>
}

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

موږ بشپړ کړل! ستاسو Next.js غوښتنلیک به اوس په اوتومات ډول ژباړل شي کله چې تاسو هر ډول متنونه په Translate کمپونینټ کې اضافه کړئ. یادونه: یواځې هغه چاپېریالونه چې د API کیلي لپاره په کې read/write اجازې شتون لري، کولای شي نوي د ژباړې لپاره متنونه جوړ کړي. موږ سپارښتنه کوو چې یو تړلی او خوندي د ازمویښتي (staging) چاپېریال ولرئ، چیرې چې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې یوې 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!