Ինչպես իրականացնել միջազգայինացում 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 ապահովում է, որ ձեր նախագծի համար ակտիվացված բոլոր տեղային կոդերը նախապես ձևավորվեն։

Այժմ, կառուցենք մեր առաջին էջը! Ստեղծեք ֆայլով անունով /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!