Как да имплементирате интернационализация в Next.js приложение, което използва Pages Router

С развитието на света в по-глобализирана посока, става все по-важно за уеб разработчиците да създават приложения, които могат да обслужват потребители от различни страни и култури. Един от ключовите начини да се постигне това е чрез интернационализация (i18n), която ви позволява да адаптирате вашето приложение към различни езици, валути и формати на дати.

В този урок ще разгледаме как да добавите интернационализация към вашето React Next.js приложение с използване на сървърно страниране (server side rendering). TL;DR: Вижте пълния пример тук.

Това ръководство е за Next.js приложения, които използват Pages Router.
Ако използвате App Router, моля вижте това ръководство вместо това.

Стъпка 1: Инсталирайте i18n библиотека

За да имплементирате интернационализация във вашето Next.js приложение, първо ще изберем i18n библиотека. Има няколко популярни библиотеки, включително next-intl. Въпреки това, в този пример ще използваме TacoTranslate.

TacoTranslate автоматично превежда вашите низове на всеки език, използвайки модерна AI технология, и ви освобождава от досадното управление на JSON файлове.

Нека го инсталираме чрез npm във вашия терминал:

npm install tacotranslate

Стъпка 2: Създайте безплатен акаунт в TacoTranslate

Сега, след като модулът е инсталиран, е време да създадете своя акаунт в TacoTranslate, проект за превод и свързаните с него API ключове. Създайте акаунт тук. Това е безплатно и не изисква добавяне на кредитна карта.

В потребителския интерфейс на приложението TacoTranslate създайте проект и отидете в раздела за 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 адресът на вашия уебсайт. Прочетете повече за origin тук.

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_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: Разгръщане и тестване!

Готови сме! Вашето React приложение вече ще бъде превеждано автоматично, когато добавите низове към компонента Translate. Имайте предвид, че само среди с разрешения read/write за API ключа ще могат да създават нови низове за превод. Препоръчваме да имате затворена и защитена тестова среда, където можете да тествате вашето продукционно приложение с такъв API ключ, като добавяте нови низове преди да го пуснете на живо. Това ще предотврати кражба на вашия таен API ключ и потенциално раздуване на вашия проект за превод чрез добавяне на нови, нерелевантни низове.

Не забравяйте да прегледате пълния пример в нашия профил в GitHub. Там също ще намерите пример как да го направите с използване на App Router ! Ако срещнете някакви проблеми, не се колебайте да се свържете с нас, и с радост ще ви помогнем.

TacoTranslate ви позволява автоматично да локализирате вашите React приложения бързо към и от всеки език. Започнете още днес!