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

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

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

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

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

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

TacoTranslate автоматично превежда вашите низове на всеки език, използвайки модерна изкуствена интелигентност, и ви освобождава от досадното управление на 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 адреса на вашия уебсайт. Научете повече за origins тук.

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), ще използваме секретния API ключ с права за четене/писане read/write, за да гарантираме, че новите низове се изпращат за превод.

До сега сме настроили приложението 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 приложения бързо на и от над 75 езика. Започнете днес!