Како да се имплементира интернационализација во 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 клуч. Ако се наоѓаме во локална, тест или тестна средина (isProduction
is false
), ќе го користиме тајниот read/write
API клуч за да се осигураме дека новите низи се пратени за превод.
До сега, само го поставивме Next.js апликацијата со листа на поддржани јазици. Следно што ќе направиме е да ги превземеме преводите за сите ваши страници. За тоа, ќе го користите или getTacoTranslateStaticProps
или getTacoTranslateServerSideProps
во зависност од вашите барања.
Овие функции примаат три аргументи: еден Next.js Static Props Context објект, конфигурација за TacoTranslate, и опциoнални 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 клучот ќе можат да креираат нови низи за преведување. Препорачуваме да имате затворена и заштитена тест средина каде што можете да ја тестирате вашата продукциска апликација со таков API клуч, додавајќи нови низи пред да ја пуштите во живо. Ова ќе спречи некој да ви го украде тајниот API клуч и потенцијално да го преполни вашиот проект за преведување со нови, не поврзани низи.
Обавезно погледнете го целосниот пример на нашиот GitHub профил. Таму, ќе најдете и пример како да го направите ова користејќи App Router! Ако наидете на какви било проблеми, слободно контактирајте не, и ќе бидеме повеќе од среќни да ви помогнеме.
TacoTranslate ви овозможува автоматско локализирање на вашите React апликации брзо до и од кој било јазик. Започнете денес!