په 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 کیلي ونه غلا کړي، او ممکن ستاسو د ژباړې پروژه د نوو، غیر اړوندو سیمو په زیاتوالي سره خراب نه کړي.

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

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