Найкраще рішення для інтернаціоналізації (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
у корені вашого проєкту.
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: Розгортання та тестування!
Ми закінчили! Тепер ваша програма на Next.js буде автоматично перекладатися щоразу, коли ви додаєте будь-які рядки до компонента Translate
. Зверніть увагу, що лише середовища з дозволами read/write
на ключ API можуть створювати нові рядки для перекладу. Ми рекомендуємо мати закрите та захищене тестове середовище, де ви зможете перевірити вашу продуктивну програму з таким ключем 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!