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

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

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