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

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

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

Այս ուղեցույցը նախատեսված է Next.js հավելվածների համար, որոնք օգտագործում են Pages Router-ը։
Եթե դուք օգտագործում եք App 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-ի կազմաձևում

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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-ը կցուցադրի public API բանալին։ Եթե մենք տեղային, փորձնական կամ դրսևորողական միջավայրում ենք (isProduction is false), մենք կօգտագործենք գաղտնի read/write API բանալին՝ համոզվելու համար, որ նոր տողերը ուղարկվում են թարգմանման։

Մինչեւ հիմա մենք միայն Next.js հավելվածը տեղադրել ենք աջակցվող լեզուների ցանկով։ Հաջորդ բանը, որ մենք կանենք, ձեր բոլոր էջերի թարգմանություններն է: Դա անելու համար դուք կօգտագործեք կա՛մ getTacoTranslateStaticProps , կա՛մ getTacoTranslateServerSideProps ՝ հիմնվելով ձեր պահանջների վրա։

Այս ֆունկցիաները վերցնում են երեք փաստարկ՝ մեկ Next.js Static Props Context օբյեկտ, կոնֆիգուրացիա TacoTranslate-ի համար եւ ընտրովի Next.js հատկություններ։ Նկատի ունեցեք, որ revalidate on 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: Տեղադրման եւ թեստավորման!

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

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

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