Най-доброто решение за интернационализация (i18n) в Next.js приложенията
Искате ли да разширите вашето Next.js приложение към нови пазари? TacoTranslate прави локализацията на вашия Next.js проект изключително лесна, позволявайки ви да достигнете до глобална аудитория без усилия.
Защо да изберете TacoTranslate за Next.js?
- Безпроблемна интеграция: Специално проектиран за Next.js приложения, TacoTranslate се интегрира лесно във вашия съществуващ работен процес.
- Автоматично събиране на низове: Няма нужда повече от ръчно управление на JSON файлове. TacoTranslate автоматично събира низове от вашия кодов базис.
- Преводи с изкуствен интелект: Използвайте силата на AI за предоставяне на контекстуално точни преводи, които пасват на тона на вашето приложение.
- Мгновена поддръжка на езици: Добавяйте поддръжка за нови езици с едно кликване, правейки вашето приложение достъпно глобално.
Как работи
С развитието на глобализацията става все по-важно за уеб разработчиците да създават приложения, които могат да обслужват потребители от различни страни и култури. Един от ключовите начини за постигане на това е чрез интернационализация (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 адресът на вашия уебсайт. Прочетете повече за origin тук.
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!