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

Marka adduunku sii caalamayo, waxa sii kordhaya muhiimadda ay leedahay in horumariyeyaasha webku ay dhisaan codsiyo u adeegaya isticmaaleyaasha ka kala yimaada dalal iyo dhaqammo kala duwan. Mid ka mid ah siyaabaha muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taas oo kuu oggolaanaysa inaad u habayso codsigaaga luqado kala duwan, lacagaha, iyo qaababka taariikhda.

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

Tilmaamahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan tixraac tilmaamahan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

Si aad uga hirgeliso caalamiyeynta codsigaaga Next.js, marka hore waxaan dooran doonaa maktabad i18n. Waxaa jira maktabado caan ah oo dhowr ah, oo ay ku jiraan next-intl. Si kastaba ha noqotee, tusaalahan, waxaanu adeegsan doonaa TacoTranslate.

TacoTranslate si otomaatig ah ayuu u turjumaa xarigyadaada (strings) luqad kasta isagoo adeegsanaya AI horumarsan, wuxuuna kaa xoreeyaa maaraynta caajiska ah ee faylasha JSON.

Aan ku rakibno annagoo adeegsanayna npm terminalkaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda markii aad module-ka rakibtay, waa waqtigii aad abuuri lahayd koontada TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xiriira. Abuur koonto halkan. Waa bilaash, mana ku qasabna inaad geliso kaarka deynta.

Gudaha UI-ga TacoTranslate, abuuri mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuur hal read fure iyo hal read/write fure. Waxaan ku keydin doonaa iyaga sidii doorsoomayaasha deegaanka. Furaha read waa waxa aan ugu yeerno public, halka furaha read/write uu yahay secret. Tusaale ahaan, waad ku dari kartaa faylka .env ee xididka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hubi inaadan waligaa shaacin furaha sirta ah read/write ee API-ga dhinaca macmiilka ee deegaannada wax-soo-saarka.

Sidoo kale, waxaan ku dari doonaa laba doorsoome deegaanka ah: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka locale-ka caadiga ah ee dib loogu laabto. Tusaalahan, waxaan u dejin doonaa en oo ah Ingiriisi.
• TACOTRANSLATE_ORIGIN: “gal” meesha qoraalladaada lagu kaydin doono, sida URL-ka boggaaga. Akhri wax dheeraad ah oo ku saabsan asalka 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 client adigoo adeegsanaya furayaasha API-ga ee hore loo abuuray. Tusaale ahaan, abuuro feyl magaciisu yahay /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;

Waxaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY goor dhow.

Abuurista macmiilka fayl gooni ah waxay ka dhigaysaa mid sahlan in dib loo isticmaalo mustaqbalka. Hadda, iyadoo la isticmaalayo /pages/_app.tsx gaar 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, fadlan ku dar qeexidda sifooyinka iyo koodhka kor ku xusan.

Tallaabada 4aad: Hirgelinta soo-saarista dhinaca server-ka

TacoTranslate waxay u oggolaanaysaa soo bandhigid dhinaca server-ka ee turjumaadahaaga. Tani waxay si weyn u hagaajinaysaa khibradda isticmaale iyadoo la muujinayo waxyaabaha la turjumay isla markiiba, halkii marka hore laga arki lahaa maaddo aan la turjumin oo soo muuqata. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah waxaan horey u haysanaa dhammaan turjumaadaha aan u baahanahay.

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'),
	});
};

Beddel hubinta isProduction si ay ugu habboonaato dejintaada. Haddii true, TacoTranslate wuxuu soo bandhigi doonaa furaha API-ga dadweynaha. Haddii aan ku jirno deegaanka maxalliga ah, tijaabo ama staging (isProduction is false), waxaanu isticmaali doonaa furaha API-ga qarsoon ee read/write si loo hubiyo in xadhigyada cusub loo diro turjumaadda.

Illaa hadda, waxaanu kaliya dejinay codsiga Next.js liiska luqadaha la taageero. Waxa xiga ee aan sameyn doono waa inaan soo qaadno turjumaadaha dhammaan boggagaaga. Si taas loo sameeyo, waxaad isticmaali doontaa midkood getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Hawlahan waxay qaataan seddex gelin: mid waa shay Next.js Static Props Context, kan labaad waa qaabeyn loogu talagalay TacoTranslate, kan saddexaadna waa guryaha Next.js ee ikhtiyaariga ah. Ogsoonow in revalidate ee ku jira getTacoTranslateStaticProps lagu dejiyey 60 sida caadiga ah, si turjumaadahaagu ay u ahaadaan kuwo la cusbooneysiiyey.

Si aad midkood uga isticmaasho bog, aynu u qaadanno inaad haysato feyl 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 waxaad awood u leedahay inaad isticmaasho qaybta Translate si aad xargaha ugu turjunto dhammaan qaybahaaga React.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Hawlgelin oo tijaabi!

Waan dhammaynay! Hadda arjigaaga React waxaa si otomaatig ah loogu turjumi doonaa markaad ku darto xadhig kasta qaybta Translate. Ogaaw in kaliya deegaanada leh oggolaanshaha 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 ammaan ah (staging) halkaas oo aad ku tijaabin karto arjigaaga wax-soo-saarka adigoo isticmaalaya furaha API-ga noocaas ah, kuna daraya xadhigyo cusub ka hor inta aadan hawlgelin. Tani waxay ka hortagi doontaa in qof kasta uu xado furahaaga sirta ah ee API-ga, isla markaana ay ka hortagi doonto in mashruucaaga turjumaadda uu buurno sababo la xiriira in la daro xadhigyo cusub oo aan xiriir la lahayn.

Hubi inaad eegto tusaalaha dhammeystiran oo ku yaal boggayaga GitHub. Halkaa, waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo iyadoo la adeegsanayo App Router! Haddii aad wax dhibaato ah la kulanto, xor u noqo inaad nala soo xiriirto, waanan ku farxi doonnaa inaan kaa caawino.

TacoTranslate waxay si otomaatig ah u lokaleyn kartaa codsiyadaada React, si dhaqso lehna u taageeri kartaa turjumaad iyo adeegsi luqado ka badan 75. Bilow maanta!