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

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

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

Այս ուղեցույցը նախատեսված է Next.js հավելվածների համար, որոնք օգտագործում են App Router:
Եթե դուք օգտագործում եք Pages Router, տեսեք այս ուղեցույցը փոխարենը։

Քայլ 1: Տեղեկատվության լռեցման գրադարան տեղադրել

Ձեր Next.js ծրագրում միջազգայինացման (internationalization) իրականացնելու համար մենք նախ կընտրենք 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Մենք մոտ ժամանակներս ավտոմատ կերպով կորոշենք TACOTRANSLATE_API_KEY և TACOTRANSLATE_PROJECT_LOCALE։

Հաճախորդի ստեղծումը առանձին ֆայլում հեշտացնում է այն հետագայում նորից օգտագործելը։ getLocales պարզապես օգտակար ֆունկցիա է՝ որոշ ներմուծված սխալների մշակմամբ։ Հիմա ստեղծեք ֆայլ՝ անվանված /app/[locale]/tacotranslate.tsx, որտեղ մենք կիրականացնենք TacoTranslate պրովայդերը։

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Նշեք 'use client';, որը ցույց է տալիս, որ սա հաճախորդի կոմպոնենտ է։

Հիմա, երբ context պրովայդերը արդյոք պատրաստ է, ստեղծեք /app/[locale]/layout.tsx ֆայլը, որը մեր հավելվածի արմատային լեյաուտն է։ Նշեք, որ այս ուղին ունի թղթապանակ, որն օգտագործում է Dynamic Routes, որտեղ [locale] փոխարկվող պարամետր է։

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Առաջին բանը, որ պետք է նկատել այստեղ, այն է, որ մենք օգտագործում ենք մեր Dynamic Route պարամետրը՝ [locale], որպեսզի վերցնենք այդ լեզվի թարգմանությունները։ Բացի այդ, generateStaticParams ապահովում է, որ ձեր նախագծի համար ակտիվացված բոլոր լեզվային կոդերը նախօրոք արտապատրաստվեն։

Հիմա, եկեք ստեղծենք մեր առաջին էջը։ Ստեղծեք ֆայլը, որը կկոչվի /app/[locale]/page.tsx:

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Հիշեք revalidate փոփոխականը, որը հայտնում է Next.js-ին վերակառուցել էջը 60 վայրկյանից հետո և պահպանել ձեր թարգմանությունները արդիական:

Քայլ 4՝ Սերվերի կողմից մատուցման իրագործում

TacoTranslate-ը աջակցում է սերվերային կողմի ռենդերինգին։ Սա զգալիորեն բարելավում է օգտագործողի փորձը՝ անմիջապես ցույց տալով թարգմանված բովանդակությունը՝ առաջին հերթին չթարգմանված բովանդակության հրատապ ի հայտ գալու փոխարեն։ Բացի դա, կարող ենք բաց թողնել ցանցային հարցումները հաճախորդի վրա, քանի որ արդեն ունենք թարգմանությունները, որոնք անհրաժեշտ են օգտագործողի դիտվող էջի համար։

Սերվերի կողմի ռենդերինգի կարգաբերման համար ստեղծեք կամ փոփոխեք /next.config.js ֆայլը՝։

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Փոփոխեք isProduction ստուգումը ըստ ձեր կարգաբերման։ Եթե true է, TacoTranslate-ը կցուցադրի հանրային API բանալին։ Եթե մենք տեղական, փորձարկման կամ նախատիպային միջավայրում ենք (isProduction is false), մենք կօգտագործենք գաղտնի read/write API բանալին՝ նոր տողերը առավել կարգին թարգմանության համար ուղարկելու համար։

Ուրույն ուղղորդումը և կրկնական ուղղորդումը սպասված մակարդակով աշխատեցնելու համար, մենք պետք է ստեղծենք ֆայլ՝ /middleware.ts: Օգտագործելով Middleware, մենք կարող ենք ուղղորդել օգտատերերին նրանց նախընտրած լեզվով ներկայացված էջերին:

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Համոզվեք, որ սահմանում եք matcher՝ համաձայն Next.js Middleware փաստաթղթերի:

Հաճախորդի կողմում կարող եք փոփոխել locale կուքիին՝ օգտատիրոջ նախընտրած լեզուն փոխելու համար։ Խնդրում ենք այս հարցում իմանալու համար դիտել լրիվ օրինակ կոդը։

Քայլ 5: Տեղադրում և փորձարկում!

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the Pages Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!