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

څنګه کار کوي

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

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

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

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

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

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

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

npm install tacotranslate

ګام ۲: د TacoTranslate وړیا حساب جوړ کړئ

اوس چې تاسو ماډیول نصب کړی دی، وخت دی چې خپل TacoTranslate حساب، د ژباړې پروژه، او اړوند API کیلي جوړ کړئ. دلته یو حساب جوړ کړئ. دا وړیا دی، او د کریډیټ کارت د اضافه کولو اړتیا نشته.

په TacoTranslate اپلیکیشن UI کې، یو پروژه جوړه کړئ او د هغې د API keys ټب ته لاړ شئ. یو 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: د ډیفالټ بدیل سیمه‌ییز (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!"/>
}

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

موږ بشپړ کړل! ستاسو 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!