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

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

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

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

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