Kuidas rakendada rahvusvahelistumist Next.js rakenduses, mis kasutab Pages Router-it
Tee oma React rakendus kättesaadavamaks ja jõua rahvusvahelise kasutajaskonnani rahvusvahelistumise (i18n) abil.
Maailma globaliseerudes muutub veebiarendajate jaoks järjest olulisemaks luua rakendusi, mis suudavad teenindada kasutajaid erinevatest riikidest ja kultuuridest. Üks võtmetee selle saavutamiseks on internatsionaliseerimine (i18n), mis võimaldab kohandada oma rakendust erinevatele keeltele, valuutadele ja kuupäevaformaatidele.
Selles õpetuses uurime, kuidas lisada internatsionaliseerimine oma React Next.js rakendusse, kasutades serveripoolset renderdamist. TL;DR: Vaata täielikku näidet siit.
See juhend on mõeldud Next.js rakendustele, mis kasutavad Pages Router.
Kui kasutate App Router, vaadake palun selle asemel seda juhendit.
1. samm: Paigalda i18n teek
Rahvusvahelistumise rakendamiseks oma Next.js rakenduses valime esmalt i18n teegi. On mitmeid populaarseid teeke, sealhulgas next-intl. Kuid selles näites kasutame TacoTranslate.
TacoTranslate tõlgib sinu tekstid automaatselt mistahes keelde, kasutades tipptasemel tehisintellekti, ning vabastab sind JSON failide tüütust haldamisest.
Paigaldame selle terminalis kasutades npm:
npm install tacotranslate
2. samm: Loo tasuta TacoTranslate konto
Nüüd, kui sul on moodul paigaldatud, on aeg luua oma TacoTranslate konto, tõlkeprojekt ja sellega seotud API võtmed. Loo konto siin. See on tasuta ja ei nõua krediitkaardi lisamist.
TacoTranslate rakenduse kasutajaliideses loo projekt ja liigu selle API keys
vahekaardile. Loo üks read
võti ja üks read/write
võti. Salvestame need keskkonnamuutujatena. read
võtit nimetame public
ja read/write
võtit secret
. Näiteks võid need lisada oma projekti juurkataloogis asuvasse .env
faili.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Veendu, et sa kunagi ei lekkita salajast read/write
API võtit kliendi poolsetesse tootmis keskkondadesse.
Lisame ka kaks keskkonnamuutujat: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Vaikimisi varukoha keelekood. Selles näites seadistame selle väärtuseksen
inglise keele jaoks.TACOTRANSLATE_ORIGIN
: “Kaust”, kuhu teie stringid salvestatakse, näiteks teie veebisaidi URL. Loe siit rohkem päritolu kohta.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Samm 3: TacoTranslate seadistamine
TacoTranslate’i integreerimiseks oma rakendusega peate looma kliendi, kasutades eelnevalt saadud API võtmeid. Näiteks looge fail nimega /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;
Me määrame peagi automaatselt TACOTRANSLATE_API_KEY
.
Kliendi loomine eraldi failis muudab selle hiljem uuesti kasutamise lihtsamaks. Nüüd, kasutades kohandatud /pages/_app.tsx
, lisame TacoTranslate
pakkuja.
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>
);
}
Kui sul on juba kohandatud pageProps
ja _app.tsx
, lisa nende definitsiooni ülaltoodud omadused ja kood.
Samm 4: Serveripoolse renderdamise rakendamine
TacoTranslate võimaldab teie tõlgete serveripoolset renderdamist. See parandab märkimisväärselt kasutajakogemust, kuvades tõlgitud sisu kohe, selle asemel et esmalt näidata lühikest tõlkimata sisu vilkumist. Lisaks saame kliendi võrgutaotlusi vahele jätta, sest meil on juba kõik vajalikud tõlked olemas.
Alustame faili /next.config.js
loomise või muutmisega.
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'),
});
};
Muuda isProduction
kontroll vastavaks oma seadistusele. Kui true
, kuvab TacoTranslate avaliku API võtme. Kui me oleme lokaalses, test- või staging keskkonnas (isProduction
is false
), kasutame salajast read/write
API võtit, et tagada uute strings'te saatmine tõlkimiseks.
Seniks oleme seadistanud Next.js rakenduse ainult toetatud keeltele. Järgmine samm on hankida tõlked kõigile teie lehtedele. Selleks kasutate kas getTacoTranslateStaticProps
või getTacoTranslateServerSideProps
vastavalt teie nõuetele.
Need funktsioonid võtavad kolm argumenti: ühe Next.js Static Props Context objekti, konfiguratsiooni TacoTranslate jaoks ning valikulised Next.js omadused. Pane tähele, et revalidate
on getTacoTranslateStaticProps
puhul vaikimisi seatud väärtusele 60, et sinu tõlked püsiksid ajakohased.
Kui soovid mõnda funktsiooni lehel kasutada, oletame, et sul on lehefail nagu /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!"/>;
}
Nüüd peaksid saama kasutada Translate
komponenti, et tõlkida kõigi oma React komponentide stringe.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Samm 5: Paigalda ja testi!
Oleme valmis! Teie React rakendus tõlgitakse edaspidi automaatselt, kui lisate mis tahes stringe Translate
komponendile. Pange tähele, et ainult keskkonnad, millel on API võtme read/write
õigused, saavad luua uusi tõlkimiseks mõeldud stringe. Soovitame omada suletud ja turvatud staging-keskkonda, kus saate testida oma tootmisrakendust sellise API võtmega, lisades enne avalikustamist uusi stringe. See takistab kellelgi teie salajast API võtit varastamast ja ei võimalda potentsiaalselt teil oma tõlkeprojekti täita uute, mitteseotud stringidega.
Veendu, et kontrollid täielikku näidet meie GitHubi profiilil. Seal leiad ka näite, kuidas seda teha kasutades App Router! Kui satud mõne probleemiga kokku, võta julgelt ühendust, ja me aitame sind rõõmuga.
TacoTranslate võimaldab sul automaatselt lokaliseerida oma Reacti rakendusi kiiresti mistahes keelde ja keeltest. Alusta täna!