Как реализовать интернационализацию в приложении 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 вашего сайта. Читать больше об источниках здесь.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Шаг 3: Настройка TacoTranslate
Чтобы интегрировать TacoTranslate с вашим приложением, вам нужно создать клиент, используя ранее полученные ключи API. Например, создайте файл с именем /utilities/tacotranslate.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 Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import tacoTranslate from '../utilities/tacotranslate';
type PageProperties = {
origin: string;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<Component {...pageProps} />
</TacoTranslate>
);
}
Если у вас уже есть пользовательские pageProps
и _app.tsx
, пожалуйста, расширьте определение с помощью свойств и кода из вышеуказанного.
Шаг 4: Реализация серверной отрисовки
TacoTranslate позволяет серверной отрисовке ваших переводов. Это значительно улучшает пользовательский опыт, показывая переведенное содержимое немедленно, вместо того чтобы сначала отображать непреведенное содержимое. Кроме того, мы можем пропустить сетевые запросы на клиенте, потому что у нас уже есть все необходимые переводы.
Мы начнем с создания или изменения /next.config.js
.
const tacoTranslate = require('./utilities/tacotranslate');
module.exports = async () => {
const locales = await tacoTranslate.getLocales();
const isProduction =
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production');
const [projectLocale] = locales;
return {
env: {
TACOTRANSLATE_ORIGIN: process.env.TACOTRANSLATE_ORIGIN,
TACOTRANSLATE_API_KEY: isProduction
? process.env.TACOTRANSLATE_PUBLIC_API_KEY
: process.env.TACOTRANSLATE_SECRET_API_KEY,
TACOTRANSLATE_DEFAULT_LOCALE: isProduction ? projectLocale : undefined,
},
i18n: {
defaultLocale: projectLocale,
locales,
},
};
};
Есть несколько моментов, на которые стоит обратить внимание. Во-первых, мы извлекаем все языки, которые вы активировали для вашего проекта перевода. Первая строка в массиве ответа – это код локали, который вы установили для проекта.
Теперь к важной части: Решение о том, находимся ли мы в производственной среде. Измените проверку isProduction
в соответствии с вашей конфигурацией. Если мы находимся в локальной, тестовой или промежуточной среде, мы должны использовать секретный read/write
API-ключ, чтобы убедиться, что новые строки отправляются на перевод. Если мы находимся в производственной среде, мы должны использовать публичный read
ключ.
До сих пор мы настроили приложение Next.js только с помощью списка поддерживаемых языков. Следующее, что мы сделаем, — это получить переводы для всех ваших страниц. Сначала создайте новый файл /utilities/custom-get-static-props.ts
.
import {type GetStaticPropsContext} from 'next';
import {type Origin} from 'tacotranslate';
import tacoTranslate from './tacotranslate';
export default async function customGetStaticProps(
{
locale = process.env.TACOTRANSLATE_DEFAULT_LOCALE,
locales,
}: GetStaticPropsContext,
additionalOrigins: Origin[] = []
) {
const origin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [origin, ...additionalOrigins];
const localizations = await tacoTranslate.getLocalizations({locale, origins});
return {
props: {locale, locales, localizations, origin},
revalidate: 60,
};
}
Эта функция принимает два аргумента: Один объект Next.js Static Props Context, и необязательный массив дополнительных источников для получения переводов, если вы используете более одного в своем приложении. Также обратите внимание на свойство revalidate
в операторе return
, которое говорит Next.js перестроить страницу через 60 секунд. Это позволит поддерживать переводы, отрендеренные на сервере, в актуальном состоянии.
Чтобы использовать эту функцию на странице, предположим, что у вас есть файл страницы, такой как /pages/hello-world.tsx
.
import {Translate} from 'tacotranslate/react';
import customGetStaticProps from '../utilities/custom-get-static-props';
export async function getStaticProps(context) {
return customGetStaticProps(context);
}
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-приложения на любой язык и с любого языка. Начните сегодня!