Լավագույն լուծումը Next.js հավելվածների համար միջազգայինացում (i18n) ապահովելու համար

Ինչպես է այն աշխատում

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

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

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

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

Ձեր Next.js հավելվածում միջազգայինացման (i18n) իրականացման համար նախ կընտրենք 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-ի կարգավորում

Դուք պետք է ստեղծեք հաճախորդ, օգտագործելով նախորդ API բանալիները, որպեսզի ինտեգրեք TacoTranslate-ը ձեր կիրառության հետ: Օրինակ՝ ստեղծեք ֆայլ՝ /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: Տեղադրե՛ք և փորձարկե՛ք!

Մենք ավարտել ենք։ Ձեր Next.js հավելվածը այժմ ավտոմատ կերպով կթարգմանվի, երբ ավելացնեք ցանկացած տեքստ Translate կոմպոնենտի մեջ։ Կատևորն այն է, որ նոր տեքստեր թարգմանության համար կարող են ստեղծվել միայն այն միջավայրերում, որտեղ API բանալիի վրա կան read/write իրավունքներ։ Հաստատում ենք, որ ունենաք փակ և ապահովված ստեյջինգ միջավայր, որտեղ կարող եք փորձարկել ձեր արտադրական հավելվածը 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 App 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!