Лучшее решение для интернационализации (i18n) в приложениях Next.js

Как это работает

По мере того как мир становится все более глобализованным, для веб-разработчиков становится все важнее создавать приложения, которые могут обслуживать пользователей из разных стран и культур. Одним из ключевых способов достижения этого является интернационализация (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 вашего сайта. Подробнее о происхождении строки читайте здесь.

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: Разверните и протестируйте!

Мы закончили! Ваше приложение на Next.js теперь будет автоматически переводиться при добавлении любых строк в компонент Translate. Обратите внимание, что только среды с разрешениями read/write на ключ API смогут создавать новые строки для перевода. Мы рекомендуем иметь закрытую и защищённую тестовую среду, где вы можете проверить ваше рабочее приложение с таким ключом API, добавляя новые строки перед запуском. Это предотвратит кражу вашего секретного ключа API и потенциальное раздувание вашего проекта перевода за счёт добавления новых, не связанных строк.

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

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