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

Marka adduunku uu sii caalamaynayo, waxay sii kordhaysaa muhiimadda ay leedahay in horumariyeyaasha webku dhisaan codsiyo u adeegaya isticmaaleyaasha ka kala yimid dalal iyo dhaqammo kala duwan. Mid ka mid ah dariiqooyinka muhiimka ah ee tan lagu gaari karo waa caalamiyeynta (i18n), taasoo kuu oggolaanaysa inaad u habeyso codsigaaga luqado, lacagaha, iyo qaababka taariikhda ee kala duwan.

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

Hagahan waxaa loogu talagalay codsiyada Next.js ee isticmaalaya Pages Router.
Haddii aad isticmaalayso App Router, fadlan eeg hagahan beddelkiisa.

Tallaabada 1: Ku rakib maktabad i18n ah

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

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

Aan ku rakibno annagoo isticmaalayna npm terminal-kaaga:

npm install tacotranslate

Tallaabada 2: Abuur akoon TacoTranslate oo bilaash ah

Hadda oo module-ka la rakibay, waa waqtigii aad abuuri lahayd akoonkaaga TacoTranslate, mashruuc turjumaad, iyo furayaasha API-ga ee la xidhiidha. Halkan iska diiwaangeli. Waa bilaash, mana u baahna inaad kaarka deynta geliso.

Gudaha UI-ga TacoTranslate, abuuri mashruuc, kadibna u gudub tab-ka furayaasha API-ga. Abuuri hal furaha read iyo hal furaha read/write. Waxaan ku kaydin doonaa sida doorsoomayaasha deegaanka. Furaha read waa waxa aan ugu yeerno public iyo furaha read/write waa secret. Tusaale ahaan, waad ku dari kartaa faylka .env ee ku jira xididka mashruucaaga.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hubso inaadan waligaa furaha API-ga sirta ah read/write u daadin deegaannada wax-soo-saarka ee dhinaca macmiilka.

Waxaan sidoo kale ku dari doonaa labadan doorsoomayaal ee deegaanka: TACOTRANSLATE_DEFAULT_LOCALE iyo TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Koodhka luqadda ee caadiga ah ee loo isticmaalo marka tarjumaad la waayo. Tusaalahan, waxaan u dejin doonnaa en oo u taagan Ingiriisi.
• TACOTRANSLATE_ORIGIN: “galka” meesha qoraalladaada lagu kaydin doono, sida URL-ka boggaaga. Akhriso 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 dhex geliso codsigaaga, waxaad u baahan doontaa inaad abuurto client adigoo adeegsanaya 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;

Waxaan si otomaatig ah u qeexi doonaa TACOTRANSLATE_API_KEY dhawaan.

Abuurista macmiilka fayl gooni ah waxay ka dhigeysaa in si fudud dib loo isticmaali karo mar dambe. Hadda, iyadoo la adeegsanayo /pages/_app.tsx 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 loo habeeyey, fadlan ballaari qeexidda adoo ku daraya sifooyinka iyo koodhka kor ku xusan.

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

TacoTranslate waxay u oggolaanaysaa in turjumaadahaaga lagu fuliyo dhinaca server-ka. Tani waxay si weyn u hagaajinaysaa khibrada isticmaale adigoo isla markiiba muujinaya waxyaabaha la turjumay, halkii uu marka hore noqon lahaa muuqaal gaaban oo aan la turjumin. Intaa waxaa dheer, waxaan ka boodi karnaa codsiyada shabakadda ee dhinaca macmiilka, sababtoo ah waxaan horey u haynaa 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'),
	});
};

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

Ilaa hadda, waxaan kaliya ku dejinnay codsiga Next.js liiska luqadaha la taageerayo. Waxa xiga ee aan sameyn doono waa inaan soo qaadno turjumaadaha dhammaan bogaggaaga. Si taas loo sameeyo, waxaad isticmaali doontaa midkood getTacoTranslateStaticProps ama getTacoTranslateServerSideProps iyadoo ku xiran shuruudahaaga.

Hawlahaas waxay qaataan saddex dood: Mid waa obyektka Next.js Static Props Context, qaabeynta TacoTranslate, iyo guryaha ikhtiyaariga ah ee Next.js. Ogsoonow in revalidate ee getTacoTranslateStaticProps lagu dejiyey 60 si caadi ah, si turjumaadahaagu ay u sii ahaadaan kuwo la cusbooneysiiyey.

Si midkood loogu isticmaalo bog, aan u qaadanno inaad leedahay fayl bog oo u eg 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 waa inaad awoodaa inaad isticmaasho qaybta Translate si aad u turjunto qoraallada ku jira dhammaan qaybaha React-kaaga.

import {Translate} from 'tacotranslate/react';

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

Tallaabada 5: Daabac oo tijaabi!

Waan dhamaynay! Codsigaaga React hadda si otomaatig ah ayaa loogu turjumi doonaa marka aad wax erayo ah ku darto qaybta Translate. Ogow in kaliya deegaanada leh oggolaanshaha read/write ee furaha API ay awoodi doonaan inay abuuraan erayo cusub oo la turjumi doono. Waxaan kugula talineynaa inaad yeelato deegaan tijaabo oo xirnaa oo ammaan ah oo aad ku tijaabin karto codsigaaga wax-soo-saarka adigoo adeegsanaya furaha API noocaas ah, kuna daraya erayo cusub ka hor inta aan la hawlgelin. Tani waxay ka hortagaysaa in qof kasta uu xado furahaaga sirta ah ee API-ga, sidoo kale waxay ka hortagi kartaa in mashruucaaga tarjumaadda uu buuxsamo iyadoo la ku darayo erayo cusub oo aan xiriir la lahayn.

Hubi inaad eegto tusaalaha buuxa boggayaga GitHub. Halkaas, waxaad sidoo kale ka heli doontaa tusaale muujinaya sida tan loogu sameeyo iyadoo la adeegsanayo App Router! Haddii aad la kulanto wax dhibaato ah, xor ayaad u tahay inaad nala soo xiriirto, waan ku farxi doonaa inaan kaa caawino.

TacoTranslate waxay si otomaatig ah u turjumaysaa una habaynaysaa codsiyadaada React, iyadoo si dhakhso leh u taageerta in ka badan 75 luqadood. Ku bilow maanta!