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

څنګه کار کوي

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

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

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

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

ستاسو د Next.js غوښتنلیک کې د نړیوال سازۍ (i18n) د پلي کولو لپاره، موږ به لومړی یو 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: د ډیفالټ فالبک سیمه‌ییز (locale) کوډ. په دې مثال کې، موږ به دا د انګلیسي لپاره en ته تنظیم کړو.
• TACOTRANSLATE_ORIGIN: هغه "فولډر" چې ستاسو متنونه پکې زیرمه کېږي، لکه د ستاسو ویب‌سایټ URL. د Origins په اړه نور ولولئ.

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 ځانګړنې. په یاد ولرئ چې پر getTacoTranslateStaticProps کې revalidate په ډیفالټ ډول 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!"/>
}

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

موږ پای ته ورسېدو! کله چې تاسو هر ډول متنونه په Translate کمپونینټ کې اضافه کړئ، ستاسو د Next.js غوښتنلیک به اوس په اوتومات ډول وژباړل شي. یادونه: یوازې هغه چاپیریالونه چې د API کیلي لپاره د read/write اجازې لري، د نوي متنونو د جوړولو وړتیا لري څو وژباړل شي. موږ سپارښتنه کوو چې یو تړلی او خوندي ازمایشي چاپیریال ولرئ چېرې تاسو کولی شئ خپل تولیدي غوښتنلیک د داسې یوې API کیلي سره وازمویئ، او مخکې له دې چې په ژوندۍ بڼه خپور کړئ نوې متنونه اضافه کړئ. دا به مخه ونیسي چې څوک ستاسو پټ API کیلي غلا کړي، او همدارنګه به مخه ونیسي چې ستاسو د ژباړې پروژه د نوو، غیر اړوندو متنونو په زیاتولو سره بې ځایه غټه (bloat) شي.

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!