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

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

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

Այս ուղեցույցը նախատեսված է Next.js հավելվածների համար, որոնք օգտագործում են App Router:
Եթե դուք օգտագործում եք Pages 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`։ Դեֆոլտային փոխարինող տեղայնացման կոդը։ Այս օրինակով այն կսահմանենք որպես 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, որը մեր հավելվածի root դեբըկն է։ Զգուշացեք, որ այս ուղին պարունակում է թղթապանակ, որը օգտագործում է 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 cookie-ն՝ փոխելու համար օգտագործողի նախընտրած լեզուն։ Խնդրում ենք դիտել լինքի ամբողջական օրինակի կոդը՝ իմանալու, թե ինչպես դա անել։

Քայլ 5: Թողարկել և փորձարկել!

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

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

TacoTranslate-ը թույլ կտա Ձեզ արագ և ավտոմատ կերպով տեղայնացնել Ձեր React ծրագրերը ցանկացած լեզվով։ Սկսեք արդեն այսօր!