Како да се имплементира интернационализација во Next.js апликација која користи Pages Router
Направете ја вашата React апликација попристапна и достигнете нови пазари со интернационализација (i18n).
Како што светот станува сè по-глобализиран, сè повеќе е важно за веб-разработчиците да создаваат апликации кои можат да одговорат на потребите на корисници од различни земји и култури. Еден од клучните начини за постигнување на ова е преку интернационализација (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 клуч. Ако сме во локална, тест или staging околина (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 апликации брзо на и од било кој јазик. Започнете денес!