Ինչպես իրականացնել բազմալեզվայնություն 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-ը արդիական արհեստական բանականության միջոցով ավտոմատ կերպով թարգմանում է ձեր տեքստերը ցանկացած լեզվով և ազատում է ձեզ 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: Լռելյայն (fallback) տեղականացման կոդը։ Այս օրինակով մենք այն սահմանում ենք որպես en՝ անգլերենի համար։
• TACOTRANSLATE_ORIGIN: «Թղթապանակը», որտեղ կպահպանվեն ձեր տեքստերը, օրինակ՝ ձեր կայքի URL‑ը։ Ավելին origins-ի մասին կարդացեք այստեղ։

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

Քայլ 3: TacoTranslate-ի կարգավորումը

TacoTranslate-ը ձեր հավելվածին ինտեգրելու համար պետք է ստեղծեք մի client՝ օգտագործելով վերևում նշված 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.

Client-ը առանձն ֆայլում ստեղծելը հետագայում դրա կրկնակի օգտագործումը հեշտացնում է։ Այժմ՝ օգտագործելով հարմարեցված /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 կոմպոնենտում։ Ուշադրություն՝ միայն այն միջավայրերը, որոնց համար API բանալին ունի read/write թույլտվություններ, կարող են ստեղծել նոր՝ թարգմանվող տեքստեր։ Խորհուրդ ենք տալիս ունենալ փակ և անվտանգ թեստային (staging) միջավայր, որտեղ կարող եք փորձարկել ձեր պրոդուկցիոն հավելվածը նման API բանալիով՝ ավելացնելով նոր տեքստեր մինչև հրապարակումը։ Սա կպաշտպանի ձեր գաղտնի API բանալին գողացումից և կնվազեցնի ռիսկը, որ ձեր թարգմանական նախագիծը լցվի ավելորդ, չկապվող տեքստերով։

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

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