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

Աշխարհի գլոբալացման հետ մեկտեղ վեբ ծրագրավորողների համար ավելի ու ավելի կարևոր է ստեղծել այնպիսի հավելվածներ, որոնք կարող են բավարարել տարբեր երկրների և մշակույթների օգտատերերի կարիքները.

Այս ձեռնարկում մենք կքննարկենք, թե ինչպես ավելացնել միջազգայինացում ձեր 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 բանալին կօգտագործի։ Եթե մենք տեղական, թեստային կամ staging միջավայրում ենք (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 լեզուների միջև։ Սկսեք այսօր!