څنګه په یوه 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

یقیني کړئ چې هیڅکله د پټو 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 key ښکاره کړي. که موږ په محلي، ټسټ یا سټيجنګ چاپیریال کې یو (isProduction is false)، موږ به د پټ read/write API key وکاروو ترڅو ډاډ ترلاسه کړو چې نوې لړۍ ژباړې ته لیږل کیږي.

تر دې دمه، موږ یوازې د 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 پروفایل کې بشپړ بېلګه وګورئ. هلته به تاسو د دې کار د کولو د طریقې یوه بېلګه د App Router په کارولو سره هم ومومئ! که کومه ستونزه درپیدا شوه، مهرباني وکړئ بې له ځنډه موږ سره اړیکه ونیسئ، او موږ به له خوښۍ سره ستاسو د مرستې لپاره شتون ولرو.

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