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

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

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

Այս ուղեցույցը նախատեսված է Pages Router օգտագործող Next.js ծրագրերի համար։
Եթե օգտագործում եք 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: Տեղադրել և փորձարկել!

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

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

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