Как реализовать интернационализацию в приложении Next.js, использующем Pages Router>
Сделайте ваше React-приложение более доступным и выйдите на новые рынки с помощью интернационализации (i18n).
По мере того как мир становится всё более глобализированным, для веб‑разработчиков становится всё важнее создавать приложения, способные обслуживать пользователей из разных стран и культур. Один из ключевых способов добиться этого — интернационализация (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. Если мы находимся в локальной, тестовой или промежуточной (staging) среде (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) окружение, где вы сможете протестировать ваше производственное приложение с таким ключом API, добавляя новые строки перед запуском в продакшен. Это предотвратит, что кто‑либо кто‑либо украдёт ваш секретный ключ API и потенциально раздуть ваш проект переводов, добавляя новые, не связанные строки.
Обязательно ознакомьтесь с полным примером в нашем профиле на GitHub. Там вы также найдёте пример того, как сделать это с использованием App Router! Если у вас возникнут какие-либо проблемы, не стесняйтесь обратиться, и мы будем более чем рады помочь.
TacoTranslate позволяет автоматически локализовать ваши React‑приложения быстро на и с более чем 75 языков. Начните сегодня!