Як реалізувати інтернаціоналізацію в застосунку 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-ключ. Якщо ми перебуваємо в локальному, тестовому або стейджинговому середовищі (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-ключа зможуть створювати нові рядки для перекладу. Рекомендуємо мати закрите та захищене тестове середовище, де ви зможете тестувати ваш продукційний додаток із таким API-ключем, додаючи нові рядки перед запуском у продакшн. Це запобіжить тому, що будь-хто будь-хто викраде ваш секретний API-ключ, а також потенційному розростанню вашого проєкту перекладів через додавання нових, не пов’язаних рядків.
Обов'язково перегляньте повний приклад у нашому профілі на GitHub. Там ви також знайдете приклад того, як це зробити, використовуючи App Router! Якщо виникнуть будь-які проблеми, не соромтеся зв'язатися, і ми з радістю допоможемо.
TacoTranslate дозволяє автоматично локалізувати ваші React-додатки швидко та в обох напрямках на понад 75 мов. Почніть вже сьогодні!