TacoTranslate
/
ДокументацияЦены
 
Статья
04 мая

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

Хотите расширить свою Next.js-приложение на новые рынки? TacoTranslate делает локализацию вашего Next.js проекта невероятно простой, позволяя вам охватить глобальную аудиторию без лишних хлопот.

Почему стоит выбрать TacoTranslate для Next.js?

  • Бесшовная интеграция: Разработан специально для приложений Next.js, TacoTranslate легко встраивается в ваш существующий рабочий процесс.
  • Автоматический сбор строк: Больше не нужно вручную управлять файлами JSON. TacoTranslate автоматически собирает строки из вашего кода.
  • Переводы на базе ИИ: Используйте мощь ИИ для получения контекстно точных переводов, соответствующих тону вашего приложения.
  • Мгновенная поддержка языков: Добавляйте поддержку новых языков одним кликом, делая ваше приложение доступным по всему миру.

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

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

.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 вашего сайта. Подробнее о происхождениях здесь.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Шаг 3: Настройка TacoTranslate

Чтобы интегрировать TacoTranslate с вашим приложением, вам нужно создать клиент, используя API-ключи из предыдущего шага. Например, создайте файл с именем /tacotranslate-client.js.

/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.

/pages/_app.tsx
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.

/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.

/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), где вы сможете тестировать ваше продуктивное приложение с таким 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!

Продукт от NattskiftetСделано в Норвегии