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

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

Երբ աշխարհը դառնում է ավելի գլոբալացված, կայքի մշակողների համար դառնում է ավելի կարևոր կառուցել ծրագրեր, որոնք կարող են обслужить օգտատերերին տարբեր երկրներից և մշակույթներից: Դրա հասնելու հիմնական միջոցներից մեկը միջազգայինացումּն (i18n) է, որը թույլ է տալիս հարմարեցնել ձեր ծրագիրը տարբեր լեզուների, արժութների և ամսաթվերի ֆորմատների համար։

Այս դասընթացում մենք կսովորենք, թե ինչպես ավելացնել միջազգայինացում ձեր React Next.js ծրագրին՝ սերվերային կողմում ռենդերինգով։ 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 բանալիները։ Ստեղծե՛ք հաշիվ այստեղ։ Դա անվճար է, և չի պահանջում վարկային քարտի ավելացում։

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`: Նախնական հետհապաղման տեղայնացման կոդը։ Այս օրինակով, մենք դա սահմանում ենք որպես en`՝ անգլերենի համար։
• TACOTRANSLATE_ORIGIN`: “Թղթապանակը”, որտեղ պահվում են ձեր տեքստերը, օրինակ՝ ձեր կայքի URL-ը։ Ուսումնասիրեք ավելին սկզբնաղբյուրների մասին այստեղ։

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

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

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՝ Տեղադրեք և փորձարկեք։

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

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

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