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

Ինչպես է այն գործում

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

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

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

Քայլ 1․ Ներմուծեք i18n գրադարան

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

TacoTranslate ավտոմատ կերպով թարգմանում է ձեր տողերը ցանկացած լեզվով՝ օգտագործելով վերջին սերնդի արհեստական բանականությունը և ազատում է ձեզ JSON ֆայլերի հոգնեցուցիչ կառավարման ծանրաբեռնվածությունից։

Տեղադրենք այն օգտագործելով npm ձեր տերմինալում:

npm install tacotranslate

Քայլ 2. Ստեղծեք անվճար TacoTranslate հաշիվ

Այժմ, երբ դուք դիտարկիչը տեղադրել եք, ժամանակն է ստեղծել ձեր TacoTranslate հաշիվը, թարգմանության նախագիծը և առկա API բանալիները։ Ստեղծեք հաշիվ այստեղ։ Այն անվճար է և դուք պետք չէ կցել վարկային քարտ։

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

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

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