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

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

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