Sida loo hirgeliyo caalamiyeynta codsi Next.js ah oo isticmaalaya Pages Router

Adduunka oo sii caalamaysanaya, waxa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webka ay dhisaan codsiyo ka jawaabi kara isticmaaleyaasha ka kala socda dalal iyo dhaqammo kala duwan. Mid ka mid ah dariiqooyinka muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaaneysa inaad codsigaaga u habeyso luqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

Casharkan, waxaanu sahamin doonaa sida loo daro caalamiyeynta (i18n) ee codsigaaga React Next.js, iyadoo la adeegsanayo soo-saarista dhinaca server-ka. TL;DR: Eeg tusaalaha buuxa halkan.

Hagahan waxaa loogu talagalay barnaamijyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg hagahan bedelka ah.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad u hirgeliso caalamiyeeynta (i18n) ee codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira dhowr maktabadood oo caan ah, oo ay ka mid yihiin next-intl. Si kastaba ha noqotee, tusaalahan, waxaan adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu qoraaladaada ugu turjumaa luqad kasta isagoo adeegsanaya AI casri ah, wuxuuna kaa xoreeyaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno annagoo isticmaalayna npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur xisaab TacoTranslate oo bilaash ah

Hadda markii aad module-ka rakibtay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc tarjumaad, iyo furayaasha API ee la xiriira. Halkan iska diiwaan geli. Waa bilaash, waxaana lagugu weydiisanayn inaad kaarka deynta ku darto.

Gudaha UI-ga TacoTranslate, abuuro mashruuc oo u gudub tabka furayaasha API. Abuur hal read furaha, iyo hal read/write furaha. Waxaan ku keydin doonaa sida doorsoomayaasha deegaanka. Furaha read waa kan aan ugu yeerno public, halka furaha read/write uu yahay secret. Tusaale ahaan, waxaad ku dari kartaa fayl .env ah oo ku yaal xididka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hubi inaadan waligaa furaha sirta ah ee read/write ee API-ga u faafin deegaanka wax-soo-saarka ee dhinaca macmiilka.

Sidoo kale, waxaan ku dari doonaa laba doorsoome deegaan oo dheeraad ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda caadiga ah ee la soo celiyo. Tusaalahan, waxaan u dejin doonaa en (Ingiriisi).
• TACOTRANSLATE_ORIGIN: “galka” meesha erayadaada lagu kaydin doono, tusaale ahaan URL-ka boggaaga. Akhri wax dheeraad ah oo ku saabsan asalada halkan.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Tallaabada 3: Dejinta TacoTranslate

Si aad TacoTranslate ugu dhexgeliso codsigaaga, waxaad u baahan doontaa inaad abuurto macmiil adigoo isticmaalaya furayaasha API-ga ee hore. Tusaale ahaan, abuur fayl la yiraahdo /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;

Dhowaan ayaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY.

Abuurista macmiilka fayl gooni ah waxay ka dhigaysaa in si sahlan dib loogu isticmaali karo. Hadda, iyadoo la adeegsanayo /pages/_app.tsx oo khaas ah, waxaan ku dari doonaa bixiyaha 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>
	);
}

Haddii aad horey u leedahay pageProps iyo _app.tsx gaar ah, fadlan balaadhi qeexidda adigoo ku daraya sifooyinka iyo koodhka kor ku xusan.

Tallaabada 4: Hirgelinta soo bandhigida dhinaca server-ka

TacoTranslate wuxuu u oggolaanayaa in turjumaadahaaga lagu soo bandhigo dhinaca server-ka. Tani si weyn ayay u wanaajisaa khibradda isticmaale, maadaama isla markiiba la muujiyo macluumaadka la turjumay, halkii marka hore laga arki lahaa daqiiqad kooban oo muujinaysa macluumaad aan la turjumin. Intaa waxaa dheer, waxaan ka dhaafi karnaa codsiyada shabakadda ee dhinaca macaamiisha, maadaama horey aan u hayno dhammaan turjumaadihii aan u baahan nahay.

Waxaan ku bilaabi doonaa inaan abuurno ama wax ka beddelno /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'),
	});
};

Wax ka beddel hubinta isProduction si ay ugu habboonaato qaabeyntaada. Haddii true ay tahay, TacoTranslate waxay soo bandhigi doontaa furaha API-ga guud. Haddii aan ku jirno deegaan maxalli ah, tijaabo, ama staging (isProduction is false), waxaan isticmaali doonaa furaha qarsoon read/write si loo hubiyo in xarigyada qoraalka cusub loo diro turjumaad.

Illaa hadda, waxaan kaliya u dejinay codsiga Next.js liis luqadaha la taageerayo. Waxa xiga ee aan sameyn doono waa inaan soo qaadno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa mid ka mid ah getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Hawlahaas waxay qaataan saddex dood: hal Next.js Static Props Context shay, qaabeynta TacoTranslate, iyo guryaha ikhtiyaariga ah ee Next.js. Ogsoonow in revalidate ee ku jira getTacoTranslateStaticProps asal ahaan loo dejiyey 60, si turjumaadahaaga u sii ahaadaan kuwo la cusbooneysiiyey.

Si midkood loogu isticmaalo bog, aynu u qaadanno inaad leedahay fayl bog sida /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!"/>;
}

Hadda waad awoodaa inaad isticmaasho qaybta Translate si aad u turjunto xadhkaha qoraalka ee dhammaan qaybaha React-kaaga.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Tallaabo 5: Deji oo tijaabi!

Waan dhammaynay! Hadda codsigaaga React si toos ah ayaa loo turjumi doonaa markaad ku darto xadhig kasta qaybta Translate. Ogsoonow in kaliya deegaanada leh rukhsadda read/write ee furaha API-ga ay awoodi doonaan inay abuuraan xadhigyo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xiran oo amaan ah oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, adigoo ku daraya xadhigyo cusub ka hor intaadan hawlgelin. Tani waxay ka ilaalinaysaa in qof kasta uu xado furahaaga sirta ah, sidoo kalena waxay ka hortagaysaa in mashruucaaga turjumaadda si aan loo baahnayn uu u buuxsamo iyadoo la darayo xadhigyo cusub oo aan xiriir la lahayn.

Hubi inaad eegto tusaalaha buuxa ee bogga GitHub-keena. Halkaas waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo adigoo isticmaalaya App Router! Haddii aad wax dhibaato ah la kulanto, xor ayaad u tahay inaad nala soo xiriirto, waxaana aad ugu farxi doonnaa inaan ku caawino.

TacoTranslate wuxuu si otomaatig ah u turjumiyaa barnaamijyadaada React, si dhakhso ahna uga shaqeeyaa turjumidda iyo dib u turjumidda in ka badan 75 luqadood. Bilow maanta!