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

څنګه کار کوي

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

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

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

ګام 1: یو 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: د ډیفالټ احتیاطي محلي (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 اجازتونه ولري، کولی شي نوي د ژباړې لپاره متونونه جوړ کړي. موږ سپارښتنه کوو چې یو تړلی او خوندي د ازموینې چاپیریال ولرئ چېرې چې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې یوې 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!