Labākais risinājums internacionalizācijai (i18n) Next.js lietotnēs
Vai vēlaties paplašināt savu Next.js lietojumprogrammu jaunos tirgos? TacoTranslate padara ārkārtīgi vieglu jūsu Next.js projekta lokalizēšanu, ļaujot sasniegt globālu auditoriju bez jebkādām grūtībām.
Kāpēc izvēlēties TacoTranslate Next.js?
- Bezšuvju integrācija: Izstrādāts tieši Next.js lietojumprogrammām, TacoTranslate viegli integrējas jūsu esošajā darbplūsmā.
- Automātiska virkņu vākšana: Vairs nav jāuztur JSON faili manuāli. TacoTranslate automātiski apkopo virknes no jūsu koda bāzes.
- AI darbinātas tulkošanas: Izmantojiet mākslīgā intelekta spēku, lai nodrošinātu kontekstuāli precīzus tulkojumus, kas atbilst jūsu lietojumprogrammas tonim.
- Instantāla valodu atbalsts: Pievienojiet jaunu valodu atbalstu ar vienu klikšķi, padarot jūsu lietojumprogrammu globāli pieejamu.
Kā tas darbojas
Pasaule kļūst arvien globalizētāka, un tīmekļa izstrādātājiem kļūst arvien svarīgāk veidot lietojumprogrammas, kas var apmierināt lietotāju vajadzības no dažādām valstīm un kultūrām. Viens no galvenajiem veidiem, kā to panākt, ir internacionalizācija (i18n), kas ļauj pielāgot jūsu lietojumprogrammu dažādām valodām, valūtām un datuma formātiem.
Šajā apmācībā mēs izpētīsim, kā pievienot internacionalizāciju jūsu React Next.js lietojumprogrammai ar servera puses renderēšanu. TL;DR: Pilnu piemēru skatiet šeit.
Šis ceļvedis ir paredzēts Next.js lietotnēm, kas izmanto Pages Router.
Ja jūs lietojat App Router, lūdzu, skatiet šo ceļvedi.
1. solis: Instalējiet i18n bibliotēku
Lai ieviestu internacionalizāciju savā Next.js lietotnē, vispirms izvēlēsimies i18n bibliotēku. Ir vairākas populāras bibliotēkas, tostarp next-intl. Tomēr šajā piemērā mēs izmantosim TacoTranslate.
TacoTranslate automātiski pārtulko jūsu virknes jebkurā valodā, izmantojot modernu mākslīgo intelektu, un atbrīvo jūs no nogurdinošas JSON failu pārvaldības.
Instalēsim to, izmantojot npm savā terminālī:
npm install tacotranslate
2. solis: Izveidojiet bezmaksas TacoTranslate kontu
Tagad, kad modulis ir instalēts, ir laiks izveidot savu TacoTranslate kontu, tulkošanas projektu un saistītās API atslēgas. Izveido kontu šeit. Tas ir bez maksas, un nav jāpievieno kredītkarte.
TacoTranslate lietotnes saskarnē izveidojiet projektu un dodieties uz tā API atslēgu cilni. Izveidojiet vienu read
atslēgu un vienu read/write
atslēgu. Mēs tās saglabāsim kā vides mainīgos. read
atslēgu saucam par public
, bet read/write
atslēga ir secret
. Piemēram, tās varat pievienot .env
failam jūsu projekta saknē.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Noteikti nekad neatklājiet slepeno read/write
API atslēgu klienta puses ražošanas vidēm.
Mēs arī pievienosim vēl divus vides mainīgos: TACOTRANSLATE_DEFAULT_LOCALE
un TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Noklusējuma rezerves lokalizācijas kods. Šajā piemērā mēs to iestatīsim uzen
angļu valodai.TACOTRANSLATE_ORIGIN
: “Mape”, kur jūsu virknes tiks glabātas, piemēram, jūsu vietnes URL. Lasiet vairāk par izcelsmēm šeit.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3. solis: TacoTranslate iestatīšana
Lai integrētu TacoTranslate ar jūsu lietotni, jums būs jāizveido klients, izmantojot iepriekš iegūtās API atslēgas. Piemēram, izveidojiet failu ar nosaukumu /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;
Mēs drīzumā automātiski definēsim TACOTRANSLATE_API_KEY
.
Klienta izveide atsevišķā failā padara tā atkārtotu izmantošanu vēl ērtāku. Tagad, izmantojot pielāgotu /pages/_app.tsx
, pievienosim TacoTranslate
nodrošinātāju.
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>
);
}
Ja jums jau ir pielāgoti pageProps
un _app.tsx
, lūdzu, paplašiniet definīciju ar augstāk minētajām īpašībām un kodu.
4. solis: Servera puses renderēšanas ieviešana
TacoTranslate ļauj servera pusē renderēt jūsu tulkojumus. Tas būtiski uzlabo lietotāja pieredzi, rādot tulkoto saturu uzreiz, nevis sākotnēji rādot neatloto saturu. Turklāt mēs varam izvairīties no tīkla pieprasījumiem klienta pusē, jo mums jau ir visi nepieciešamie tulkojumi.
Mēs sāksim, izveidojot vai modificējot /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'),
});
};
Modificējiet isProduction
pārbaudi atbilstoši jūsu konfigurācijai. Ja true
, TacoTranslate nodrošinās publisko API atslēgu. Ja atrodamies lokālā, testa vai izstrādes vidē (isProduction
is false
), mēs izmantosim slepeno read/write
API atslēgu, lai pārliecinātos, ka jauni teksti tiek nosūtīti tulkošanai.
Līdz šim mēs vienīgi uzstādījām Next.js lietotni ar atbalstīto valodu sarakstu. Nākamais solis būs iegūt tulkojumus visām jūsu lapām. Lai to izdarītu, jums jāizmanto vai nu getTacoTranslateStaticProps
, vai getTacoTranslateServerSideProps
, atkarībā no jūsu prasībām.
Šīs funkcijas saņem trīs argumentus: vienu Next.js Static Props Context objektu, konfigurāciju TacoTranslate, un izvēles Next.js īpašības. Ņemiet vērā, ka revalidate
uz getTacoTranslateStaticProps
pēc noklusējuma ir iestatīts uz 60, lai jūsu tulkojumi būtu aktuāli.
Lai izmantotu kādu no funkcijām lapā, pieņemsim, ka jums ir lapas fails kā /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!"/>;
}
Tagad jums vajadzētu būt iespējai izmantot Translate
komponentu, lai tulkotu virknes visās jūsu React komponentēs.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5. solis: Izvietojiet un testējiet!
Mēs esam pabeiguši! Jūsu Next.js lietotne tagad tiks automātiski tulkota, kad pievienosiet jebkādus tekstus Translate
komponentā. Ņemiet vērā, ka tikai vidēs ar read/write
atļaujām attiecīgajā API atslēgā būs iespēja izveidot jaunus tulkojamos tekstus. Mēs iesakām nodrošināt aizvērtu un drošu testēšanas vidi, kurā varat pārbaudīt savu ražošanas lietotni, izmantojot šādu API atslēgu, pievienojot jaunus tekstus pirms to izlaišanas. Tas pasargās jūsu slepeno API atslēgu no nozagšanas un novērsīs jūsu tulkošanas projekta pārblīvētību ar jauniem, nesavienojamiem tekstiem.
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!