Як реалізувати інтернаціоналізацію в застосунку Next.js, який використовує Pages Router

У міру того, як світ стає все більш глобалізованим, для веб-розробників стає дедалі важливішим створювати застосунки, які можуть задовольнити потреби користувачів з різних країн та культур. Один із ключових способів досягти цього — це інтернаціоналізація (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. Рекомендуємо мати закрите та захищене тестове (staging) середовище, де ви зможете перевірити ваш продуктивний застосунок з таким ключем API, додаючи нові рядки перед запуском у продакшн. Це захистить ваш секретний ключ API від крадіжки, а також запобіжить зайвому роздуванню проекту перекладів за рахунок додавання непридатних рядків.

Обов’язково перегляньте повний приклад у нашому профілі на GitHub. Там ви також знайдете приклад того, як це зробити, використовуючи App Router! Якщо у вас виникнуть будь-які проблеми, не соромтеся зв’язатися з нами, і ми будемо раді допомогти.

TacoTranslate дозволяє автоматично локалізувати ваші React додатки швидко на будь-яку мову і з неї. Почніть сьогодні!