Ինչպես իրականացնել միջազգայինացում Next.js հավելվածում, որը օգտագործում է Pages Router։

Ինչքան աշխարհը գլոբալանում է, այնքան ավելի կարևոր է վեբ ծրագրավորողների համար ստեղծել հավելվածներ, որոնք կարող են ծառայել տարբեր երկրներից և մշակույթներից ծագող օգտատերերին։ Այս նպատակը հասնելու կարևոր միջոցներից մեկն է միջազգայինացում (i18n), որը հնարավորություն է տալիս հարմարեցնել ձեր հավելվածը տարբեր լեզուների, արժույթների և ամսաթվերի ձևաչափերի համար։

Այս ձեռնարկում կքննարկենք, թե ինչպես ավելացնել միջազգայինացում ձեր React Next.js հավելվածում, սերվերային կողմից ռենդերավորմամբ։ TL;DR: Այստեղ դիտեք լրիվ օրինակ։

Այս ուղեցույցը նախատեսված է Next.js հավելվածների համար, որոնք օգտագործում են Pages Router:
Եթե դուք օգտագործում եք App Router, խնդրում ենք փոխարենը դիտել այս ուղեցույցը:

Քայլ 1՝ Ներբեռնեք i18n գրադարան

Ձեր Next.js կիրառության մեջ միջազգայինացման (i18n) իրականացման համար նախ ընտրելու ենք i18n գրադարան։ Կան մի քանի հայտնի գրադարաններ, որոնց մեջ են next-intl։ Սակայն այս օրինակով մենք օգտագործելու ենք TacoTranslate։

TacoTranslate-ը ավտոմատ կերպով թարգմանում է ձեր տողերը ցանկացած լեզվով՝ օգտագործելով նորագույն AI տեխնոլոգիաներ, և ազատում է ձեզ JSON ֆայլերի դանդաղ կառավարման ծանրությունից։

Եկեք տեղադրենք այն օգտագործելով npm ձեր տերմինալում։

npm install tacotranslate

Քայլ 2․ Ստեղծեք անվճար 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

Քայլ 3․ 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, խնդրում ենք ընդլայնել սահմանումը վերևում նշված հատկություններով և կոդով։

Քայլ 4: Սերվերային կողմի մատուցումն իրականացնում ենք

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!"/>
}

Քայլ 5՝ Վերբեռնել և փորձարկել!

Մենք ավարտեցինք։ Ձեր React ծրագիրը այժմ ավտոմատ կերպով կթարգմանվի, երբ դուք կհավելեք ցանկացած տեքստ Translate կոմպոնենտում։ Նշենք, որ միայն այն միջավայրերը, որոնք ունեն read/write թույլտվություններ API բանալու վրա, կկարողանան ստեղծել նոր տեքստեր թարգմանության համար։ Մենք խորհուրդ ենք տալիս ունենալ փակ և ապահովված ստեյջինգ միջավայր, որտեղ կարող եք փորձարկել ձեր արտադրական ծրագիրը նման API բանալիով՝ նոր տեքստեր ավելացնելուց առաջ։ Սա կխուսափեցնի որևէ մեկին գաղտնի API բանալին գողանալուց, և հնարավոր է կանխի թարգմանական նախագիծը ոչ համապատասխան նոր տեքստերով ծանրաբեռնելուց։

Հաստատեք, որ դիտեք ամբողջական օրինակ մեր GitHub պրոֆիլում։ Այնտեղ դուք նաև կգտնեք օրինակ, թե ինչպես դա անել օգտագործելով App Router։ Եթե հանդիպեք որևէ խնդիրների, ազատ զգացեք կապնվել մեզ հետ, և մենք մեծ ուրախությամբ կօգնենք ձեզ։

TacoTranslate-ը թույլ է տալիս ձեզ ավտոմատ կերպով տեղայնացնել ձեր React հավելվածները արագորեն ցանկացած լեզվից և ցանկացած լեզվով։ Սկսեք այսօր!