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 բանալին։ Եթե մենք տեղական, թեստային կամ ստեյջինգ միջավայրում ենք (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: Տեղակայեք և փորձարկեք!

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