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

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

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

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

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

د خپل Next.js غوښتنلیک کې د نړیوالولو (internationalization) د پلي کولو لپاره، موږ به لومړی یوه i18n کتابتون وټاکو. څو مشهور کتابتونونه شته، چې پکې next-intl هم شامل دی. خو، په دې مثال کې، موږ به د TacoTranslate کاروو.

TacoTranslate ستاسو متنونه په هره ژبه په اتومات ډول د پرمختللي AI په کارولو سره ژباړي، او تاسو د JSON د فایلونو له سخت مدیریت څخه آزاده کوي.

راځئ چې دا په خپل ټرمینل کې د npm په کارولو سره انسټال کړو:

npm install tacotranslate

مرحله ۲: يوه وړيا TacoTranslate حساب جوړ کړئ

اوس چې تاسو ماډل نصب کړی، وخت راغلی چې خپل TacoTranslate حساب جوړ کړئ، د ژباړې پروژه، او اړوند API کیلي ګانې. دلته حساب جوړ کړئ. دا وړيا دی، او تاسو ته د کریډیټ کارت د زیاتولو اړتیا نشته.

د TacoTranslate غوښتنلیک UI کې، یو پروژه جوړه کړئ، او د هغې API keys ټب ته لاړ شئ. یو read key جوړ کړئ، او یو read/write key جوړ کړئ. موږ به دا د چاپیریال متغیرونو په توګه خوندي کړو. read key هغه څه دي چې موږ ورته public وایو او read/write key بیا 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 تنظیمول

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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!"/>
}

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

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

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

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