Next.js հավելվածների համար բազմալեզվայնացման (i18n) լավագույն լուծումը

Ինչպես է աշխատում

Քանի որ աշխարհը դառնում է ավելի գլոբալ, վեբ մշակողների համար ավելի ու ավելի կարևոր է կառուցել այնպիսի հավելվածներ, որոնք կարող են սպասարկել տարբեր երկրների և մշակույթների օգտվողներին։ Աշխատանքը իրականացնելու հիմնական եղանակներից մեկը միջազգայինացումն է (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.

Կլիենտը առանձին ֆայլում ստեղծելը հեշտացնում է այն հետագայում կրկին օգտագործելը։ Հիմա, օգտագործելով հարմարեցված /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 հատկությունները։ Ուշադրություն՝ 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: Տեղադրեք և փորձարկեք!

Ամեն ինչ ավարտվեց։ Ձեր Next.js հավելվածը այժմ ավտոմատ կերպով կթարգմանվի, երբ Translate կոմպոնենտում ավելացնեք ցանկացած տեքստ։ Ուշադրություն՝ միայն այն միջավայրերն, որոնց API բանալուն տրված է read/write թույլտվությունը, կկարողանան ստեղծել նոր՝ թարգմանության ենթակա տեքստեր։ Խորհուրդ ենք տալիս ունենալ փակ և ապահով փորձարկման (staging) միջավայր, որտեղ կարող եք այդպիսի API բանալիով փորձարկել ձեր production հավելվածը՝ ավելացնելով նոր տեքստեր նախքան հրապարակումը։ Սա կխուսափեցնի այն, որ որևէ մեկը գողանա ձեր գաղտնի API բանալին և կանխի ձեր թարգմանական նախագծի ոչ անհրաժեշտ մեծացումը՝ ոչ առնչվող նոր տեքստեր ավելացնելու արդյունքում։

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!