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

دا څنګه کار کوي

لکه څنګه چې نړۍ نوره هم نړیواله کېږي، د ویب پراختیا کونکو لپاره دا مهمه ده چې داسې غوښتنلیکونه جوړ کړي چې د بېلابېلو هېوادونو او کلتورونو کاروونکو ته خدمت وکولی شي. د دې ترلاسه کولو یوه اساسي لاره نړیواله کول (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 کیلي ښکاره کړي. که موږ په محلي، آزمایښتي، یا سټېجینګ چاپیریال کې یو (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!"/>
}

مرحله ۵: ځای پر ځای کول او ازموینه!

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