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

Աշխարհի գլոբալացման հետ մեկտեղ վեբ մշակողների համար էլ ավելի կարևոր է ստեղծել այնպիսի կիրառություններ, որոնք կարող են բավարարել տարբեր երկրների ու մշակույթների օգտատերերի կարիքները։ One of the key ways to achieve this is through internationalization (i18n), which allows you to adapt your application to different languages, currencies, and date formats.

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

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

Քայլ 1: Տեղադրեք i18n գրադարան

Միջազգայինացում (i18n) ձեր Next.js հավելվածում իրականացնելու համար նախ ընտրենք 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.

Կլիենտը առանձին ֆայլում ստեղծելը հեշտացնում է այն հետագայում կրկնակի օգտագործելը։ Հիմա, օգտագործելով հարմարեցված /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 բանալին։ Եթե մենք տեղական, թեստային կամ staging միջավայրում ենք (isProduction is false), մենք կօգտագործենք գաղտնի read/write API բանալին՝ ապահովելու համար, որ նոր տողերը ուղարկվեն թարգմանության։

Մինչ այժմ մենք միայն Next.js հավելվածը կազմաձևել ենք աջակցվող լեզուների ցանկով։ Հաջորդը կլինի բոլոր ձեր էջերի թարգմանությունները ստանալը։ Դա կատարելու համար, ըստ ձեր պահանջների, դուք կօգտագործեք կամ getTacoTranslateStaticProps կամ getTacoTranslateServerSideProps։

Այս ֆունկցիաները ընդունում են երեք պարամետր՝ մեկ Next.js Static Props Context օբյեկտ, TacoTranslate-ի կազմաձև և հավելյալ Next.js հատկություններ։ Ուշադրություն։ getTacoTranslateStaticProps ֆունկցիայում revalidate ըստ կանխադրման սահմանված է 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 բանալով փորձարկել ձեր արտադրական հավելվածը և ավելացնել նոր տողեր նախքան հրապարակումը։ Սա կխուսափեցնի այն բանից, որ որևէ մեկը գողանա ձեր գաղտնի API բանալին և հնարավոր է ծանրաբերի ձեր թարգմանական նախագիծը նոր, ոչ կապված տողերով։

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

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