Как реализовать интернационализацию в приложении 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), мы будем использовать секретный 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-ключа. Мы рекомендуем иметь закрытое и защищённое staging-окружение, где вы сможете тестировать своё production-приложение с таким API-ключом, добавляя новые строки до выпуска в продакшен. Это предотвратит кражу вашего секретного API-ключа, а также поможет избежать раздувания вашего проекта перевода новыми, не относящимися к делу строками.

Обязательно ознакомьтесь с полным примером на нашем профиле GitHub. Там вы также найдете пример того, как это сделать с использованием App Router! Если у вас возникнут какие-либо проблемы, не стесняйтесь обратиться к нам, и мы будем рады помочь.

TacoTranslate позволяет автоматически локализовать ваши React-приложения быстро на любой язык и с любого языка. Начните сегодня!