Najboljša rešitev za internacionalizacijo (i18n) v Next.js aplikacijah
Ali želite razširiti svojo Next.js aplikacijo na nove trge? TacoTranslate vam izjemno olajša lokalizacijo vašega Next.js projekta, kar vam omogoča, da dosežete globalno občinstvo brez zapletov.
Zakaj izbrati TacoTranslate za Next.js?
- Nemotena integracija: Posebej zasnovan za Next.js aplikacije, se TacoTranslate brez napora vključi v vaš obstoječi delovni proces.
- Samodejno zbiranje nizov: Nič več ročnega upravljanja JSON datotek. TacoTranslate samodejno zbira nize iz vaše kode.
- Prevodi na osnovi umetne inteligence: Izkoristite moč umetne inteligence za zagotavljanje kontekstualno natančnih prevodov, ki ustrezajo tonu vaše aplikacije.
- Takojšnja podpora jezikom: Dodajte podporo za nove jezike z enim klikom, s čimer bo vaša aplikacija dostopna globalno.
Kako deluje
S svetom, ki postaja vse bolj globaliziran, je za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki lahko ustrezajo uporabnikom iz različnih držav in kultur. Ena izmed ključnih metod za dosego tega je internacionalizacija (i18n), ki omogoča prilagajanje vaše aplikacije različnim jezikom, valutama in oblikam datuma.
V tem priročniku bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji s strežniškim renderiranjem. TL;DR: Oglejte si celoten primer tukaj.
Ta vodnik je za aplikacije Next.js, ki uporabljajo Pages Router.
Če uporabljate App Router, si oglejte namesto tega ta vodnik.
1. korak: Namestite i18n knjižnico
Za implementacijo internacionalizacije v vaši Next.js aplikaciji bomo najprej izbrali knjižnico za i18n. Obstaja več priljubljenih knjižnic, vključno z next-intl. Vendar bomo v tem primeru uporabili TacoTranslate.
TacoTranslate samodejno prevede vaše nize v kateri koli jezik z uporabo najsodobnejše umetne inteligence in vas osvobodi utrujajočega upravljanja JSON datotek.
Namestimo ga z uporabo npm v vašem terminalu:
npm install tacotranslate
Korak 2: Ustvarite brezplačen račun TacoTranslate
Zdaj, ko imate modul nameščen, je čas, da ustvarite svoj račun na TacoTranslate, prevajalski projekt in pripadajoče API ključe. Ustvarite račun tukaj. Je brezplačno in ne zahteva vnos kreditne kartice.
V uporabniškem vmesniku aplikacije TacoTranslate ustvarite projekt in pojdite na zavihek za API ključe. Ustvarite en read
ključ in en read/write
ključ. Shranili jih bomo kot okoljske spremenljivke. read
ključ imenujemo public
, medtem ko je read/write
ključ secret
. Na primer, lahko jih dodate v .env
datoteko v korenski mapi vašega projekta.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Poskrbite, da skrivni ključ API read/write
nikoli ne bo razkrit v produkcijskih okoljih na strani odjemalca.
Dodali bomo tudi dve spremenljivki okolja: TACOTRANSLATE_DEFAULT_LOCALE
in TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Privzeta koda jezika za vrnitev. V tem primeru jo bomo nastavili naen
za angleščino.TACOTRANSLATE_ORIGIN
: „Mapa“, kjer bodo shranjene vaše besedilne nize, na primer URL vaše spletne strani. Preberite več o izvorih tukaj.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Korak 3: Nastavitev TacoTranslate
Za integracijo TacoTranslate v vašo aplikacijo boste morali ustvariti klienta z uporabo API ključev, ki ste jih prej pridobili. Na primer, ustvarite datoteko z imenom /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;
Kmalu bomo samodejno definirali TACOTRANSLATE_API_KEY
.
Ustvarjanje odjemalca v ločeni datoteki olajša ponovno uporabo kasneje. Zdaj bomo z uporabo prilagojene datoteke /pages/_app.tsx
dodali ponudnika 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>
);
}
Če že imate prilagojene pageProps
in _app.tsx
, prosimo, razširite definicijo z lastnostmi in kodo iz zgoraj navedenega.
Korak 4: Implementacija upodabljanja na strežniški strani
TacoTranslate omogoča strežniško upodabljanje vaših prevodov. To močno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto da bi najprej prikazal utrinek nepřevđene vsebine. Poleg tega lahko preskočimo omrežne zahteve na strani odjemalca, ker že imamo vse potrebne prevode.
Začeli bomo z ustvarjanjem ali spreminjanjem /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'),
});
};
Spremenite preverjanje isProduction
tako, da ustreza vaši nastavitvi. Če true
, bo TacoTranslate prikazal javni ključ API. Če smo v lokalnem, preskusnem ali pripravljalnem okolju (isProduction
is false
), bomo uporabili skrivni ključ API read/write
, da zagotovimo, da so novi nizi poslani v prevod.
Do zdaj smo v aplikaciji Next.js nastavili le seznam podprtih jezikov. Naslednja stvar, ki jo bomo naredili, je pridobitev prevodov za vse vaše strani. Za to boste uporabili bodisi getTacoTranslateStaticProps
ali getTacoTranslateServerSideProps
glede na vaše zahteve.
Ti funkciji sprejemata tri argumente: en Next.js Static Props Context objekt, konfiguracijo za TacoTranslate in neobvezne Next.js lastnosti. Upoštevajte, da je revalidate
pri getTacoTranslateStaticProps
po privzetku nastavljen na 60, da prevodi ostanejo posodobljeni.
Za uporabo katere koli funkcije na strani predpostavimo, da imate datoteko strani, kot je /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!"/>;
}
Zdaj bi morali biti sposobni uporabljati komponento Translate
za prevajanje nizov v vseh vaših React komponentah.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Korak 5: Namestite in preizkusite!
Končali smo! Vaša Next.js aplikacija bo zdaj samodejno prevedena, ko boste dodali katerikoli niz v komponento Translate
. Upoštevajte, da bodo lahko nove nize za prevajanje ustvarjala le okolja s pravicami read/write
za API ključ. Priporočamo, da imate zaprto in varno okolje za testiranje (staging), kjer lahko preizkusite svojo produkcijsko aplikacijo s takim API ključem, tako da dodate nove nize pred objavo. Tako boste preprečili, da bi kdo ukradel vaš skrivni API ključ in morebiti napihnil vaš prevajalski projekt z dodajanjem novih, nepovezanih nizov.
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!