په 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!