Најдоброто решение за интернационализација (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-то на вашата веб-страница. Прочитајте повеќе за огништата тука.
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 клучот ќе може да креираат нови низи за преведување. Советуваме да имате затворена и обезбедена staging средина каде што можете да ја тестирате вашата продукциска апликација со таков 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!