Ինչպես իրականացնել միջազգայինացում 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.

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

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

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