Най-доброто решение за интернационализация (i18n) в Next.js приложенията

Как работи

С нарастващата глобализация на света, става все по-важно за уеб разработчиците да създават приложения, които могат да обслужват потребители от различни държави и култури. Един от ключовите начини да се постигне това е чрез интернационализация (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 ключ и потенциалното разрастване на вашия проект за преводи чрез добавяне на нови, несвързани низове.

Не забравяйте да прегледате пълния пример в нашия GitHub профил. Там ще намерите и пример как да го направите, използвайки App Router![ Ако срещнете някакви проблеми, не се колебайте да се свържете с нас, и ние с удоволствие ще помогнем.

TacoTranslate ви позволява бързо и автоматично да локализирате вашите React приложения на всеки език и обратно. Започнете днес!