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

Երբ աշխարհն ավելի գլոբալիզացվում է, վեբ ծրագրավորողների համար գնալով ավելի կարևոր է ստեղծել այնպիսի հավելվածներ, որոնք կարող են ծառայել տարբեր երկրներից ու մշակույթներից օգտվողներին: Այսինքը հասնելու հիմնական ճանապարհներից մեկը միջազգայինացումը (i18n) է, որը թույլ է տալիս հարմարեցնել ձեր հավելվածը տարբեր լեզուների, արժույթների և ամսաթվերի ձևաչափերի համար։

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

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

Քայլ 1․ Ուстановить i18n գրադարան

Ձեր Next.js ծրագրում միջազգայինացման իրականացման համար, մենք նախ կընտրենք i18n գրադարան։ Կան մի քանի հանրաճանաչ գրադարաններ, ներառյալ next-intl: Սակայն, այս օրինակով մենք կիրառում ենք TacoTranslate:

TacoTranslate ավտոմատ կերպով թարգմանում է ձեր տողերը ցանկացած լեզվով՝ օգտագործելով ժամանակակից ԱԹ, և ազատում է ձեզ JSON ֆայլերի հոգնեցուցիչ կառավարումից։

Պահանջված է տեղադրել այն օգտագործելով npm ձեր տերմինալում։

npm install tacotranslate

Քայլ 2՝ Ստեղծեք անվճար TacoTranslate հաշիվ

Այժմ, երբ մոդուլը տեղադրված է, պատրաստվեք ստեղծել ձեր TacoTranslate հաշիվը, թարգմանության նախագիծը և համապատասխան API բանալիները։ Ստեղծեք հաշիվ այստեղ։ Դա անվճար է և չպահանջվում է կցել կրեդիտ քարտ։

Within the TacoTranslate application 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`՝ Նախանշված ենթադրյալ լեզվի կոդ: Այս օրինակով մենք կսահմանենք այն որպես en՝ անգլերեն լեզվի համար։
• TACOTRANSLATE_ORIGIN`՝ "փաթեթ" որտեղ ձեր տեքստերը կպահպանվեն, օրինակ՝ ձեր կայքի URL-ը: Ավելին կարդացեք սկզբունքների մասին այստեղ։

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Քայլ 3՝ TacoTranslate-ի կարգավորումը

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

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

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