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

Քանի որ աշխարհը դառնում է ավելի գլոբալացված,越来越 महत्वपूर्ण է, որ վեբ զարգացողների համար կառուցեն հավելվածներ, որոնք կարող են բավարարել տարբեր երկրների և մշակույթների օգտատերերի կարիքներին: Սրա հասնելու հիմնական մեթոդներից մեկն է միջազգայինացում (i18n), որը թույլ է տալիս հարմարեցնել ձեր հավելվածը տարբեր լեզուների, արժույթների և ամսաթվի ձևաչափերի համար:

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

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

Քայլ 1: Տեղադրեք i18n գրադարան

Ձեր Next.js դիմվածքում միջազգայինացման իրականացման համար, նախ ընտենք i18n գրադարան։ Կան մի քանի հանրահայտ գրադարաններ, այդ թվում՝ next-intl։ Սակայն այս օրինակով, մենք օգտագործելու ենք TacoTranslate։

TacoTranslate ավտոմատ կերպով թարգմանում է ձեր տողերը ցանկացած լեզվով՝ օգտագործելով ամենասահմռկելի AI, և ազատում է ձեզ 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';, որը ցույց է տալիս, որ սա հաճախորդի կոմպոնենտ է։

Հիմա, երբ կոնտեքստի պրովայդերը պատրաստ է, ստեղծեք ֆայլ՝ անունով /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 ապահովում է, որ ձեր նախագծի համար ակտիվացված բոլոր լեզվային կոդերը նախապատրաստված լինեն (pre-rendered):

Ահա, եկեք կառուցենք մեր առաջին էջը։ Ստեղծեք ֆայլ՝ անունով /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 cookie-ն՝ օգտատիրոջ նախընտրած լեզուն փոփոխելու համար։ Խնդրում ենք դիտել լրիվ օրինակ կոդը՝ իմանալու, թե ինչպես համարվում է սա անել։

Քայլ 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!