په هغه Next.js غوښتنلیک کې چې د Pages Router کاروي څنګه نړیوالتوب پلي کړو

څرنګه چې نړۍ نوره هم نړیواله کیږي، دا د ویب پراختیا کونکو لپاره ورځ تر بلې ډیر مهم کیږي چې داسې غوښتنلیکونه جوړ کړي چې د مختلفو هیوادونو او کلتورونو کاروونکو اړتیاوې پوره کړي. د دې ترلاسه کولو یوه مهمه لاره د نړیوالتیا (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

ډاډ ترلاسه کړئ چې_secret_ 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!"/>
}

ګام ۵: خپرول او آزموینه!

موږ بشپړ کړل! ستاسو React تطبیق به اوس په اوتومات ډول وژباړل شي کله چې تاسو هر ډول سترینګونه د Translate عنصر ته اضافه کړئ. په یاد ولرئ چې یوازې هغه چاپیریالونه چې د API کیلي په اړه د read/write اجازه لري، وکولی شي نوي سترینګونه د ژباړې لپاره جوړ کړي. موږ وړاندیز کوو چې یو تړلی او خوندي سټیجینګ چاپیریال ولرئ چیرې چې تاسو کولی شئ خپل تولیدي تطبیق د داسې API کیلي سره آزموینه کړئ، او د ژوند پیل کولو مخکې نوي سترینګونه اضافه کړئ. دا به له دې څخه مخنیوی وکړي چې څوک ستاسو پټ API کیلي غلا کړي، او ممکن ستاسو د ژباړې پروژه د بې ارتباطه نوو سترینګونو په زیاتولو سره ډیر بار نشي.

ډاډ ترلاسه کړئ چې زموږ په GitHub پروفایل کې بشپړ مثال وګورئ: check out the complete example. هلته به تاسو د دې کار د ترسره کولو یوه بله بیلګه هم ومومئ چې د App Router کاروي! که تاسو کومه ستونزه ولرئ، مهرباني وکړئ په آزاده توګه سره اړیکه ونیسئ: reach out، او موږ به ډېر خوښ شو چې مرسته وکړو.

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