Как да реализирате интернационализация в 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 автоматично превежда вашите низове на всякакъв език, използвайки най-съвременен AI, и ви освобождава от досадното управление на 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 приложения към и от над 75 езика. Започнете още днес!