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

Երբ աշխարհը դառնում է ավելի գլոբալացված, վեբ մշակողների համար ավելի ու ավելի կարևոր է ստեղծել ծրագրեր, որոնք կարող են հարմարեցնել տարբեր երկրների և մշակույթների օգտվողներին: Ներսցնելուց մեկը հիմնական ուղիներից է միջազգայինացումն (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: Համապատասխան տեղադրում և թեստավորում!

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

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

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