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

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

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!