Najboljša rešitev za internacionalizacijo (i18n) v aplikacijah Next.js
Iščete način, kako razširiti svojo Next.js aplikacijo na nove trge? TacoTranslate izjemno olajša lokalizacijo vašega Next.js projekta, kar vam omogoča, da brez zapletov dosežete globalno občinstvo.
Zakaj izbrati TacoTranslate za Next.js?
- Brezhibna integracija: TacoTranslate je zasnovan posebej za aplikacije Next.js in se brez težav vključi v vaš obstoječi delovni proces.
- Samodejno zbiranje nizov: Ni vam več treba ročno upravljati JSON datotek. TacoTranslate samodejno zbira nize iz vaše kode.
- Prevodi z umetno inteligenco: Izkoristite moč umetne inteligence za kontekstualno natančne prevode, ki ustrezajo tonu vaše aplikacije.
- Takojšnja podpora jezikom: Dodajte podporo za nove jezike z enim samim klikom in omogočite globalno dostopnost vaše aplikacije.
Kako deluje
Svet postaja vedno bolj globaliziran, zato je za spletne razvijalce vse pomembneje, da ustvarjajo aplikacije, ki so prilagojene uporabnikom iz različnih držav in kultur. Eden ključnih načinov za dosego tega je internacionalizacija (i18n), ki omogoča prilagoditev vaše aplikacije različnim jezikom, valutam in formatom datumov.
V tem vodiču bomo raziskali, kako dodati internacionalizacijo vaši React Next.js aplikaciji z upoštevanjem strežniškega upodabljanja. TL;DR: Oglejte si celoten primer tukaj.
Ta vodič je namenjen aplikacijam Next.js, ki uporabljajo Pages Router.
Če uporabljate App Router, si oglejte raje ta vodič.
1. korak: Namestite i18n knjižnico
Za implementacijo internacionalizacije v vaši Next.js aplikaciji bomo najprej izbrali i18n knjižnico. Obstaja več priljubljenih knjižnic, vključno z next-intl. Vendar pa 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 napornega upravljanja JSON datotek.
Namestimo ga z uporabo npm v vašem terminalu:
npm install tacotranslate
2. korak: Ustvarite brezplačen račun TacoTranslate
Zdaj, ko imate modul nameščen, je čas, da ustvarite svoj TacoTranslate račun, prevajalski projekt in povezane API ključe. Ustvarite račun tukaj. Brezplačno je in ne zahteva vnosa kreditne kartice.
V uporabniškem vmesniku aplikacije TacoTranslate ustvarite projekt in pojdite na zavihek z API ključi. 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
Vedno pazite, da nikoli ne razkrijete skrivnega read/write
API ključa v produkcijskih okoljih na odjemalcu.
Dodali bomo še dve spremenljivki okolja: TACOTRANSLATE_DEFAULT_LOCALE
in TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Privzeta koda jezika za vračanje. V tem primeru jo bomo nastavili naen
za angleščino.TACOTRANSLATE_ORIGIN
: »Mapa«, kjer bodo shranjene vaše nizi, 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 klienta v ločeni datoteki olajša ponovno uporabo kasneje. Zdaj bomo z uporabo prilagojenega /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 s lastnostmi in kodo iz zgoraj.
Korak 4: Implementacija upodabljanja na strani strežnika
TacoTranslate omogoča upodabljanje prevodov na strani strežnika. To močno izboljša uporabniško izkušnjo, saj takoj prikaže prevedeno vsebino, namesto da bi najprej pokazal utrinek neprevedene vsebine. Poleg tega lahko preskočimo mrežne zahteve na odjemalcu, ker že imamo vse potrebne prevode.
Začeli bomo z ustvarjanjem ali spreminjanjem datoteke /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 sedaj smo v aplikaciji Next.js nastavili samo seznam podprtih jezikov. Naslednje, kar bomo storili, je pridobivanje prevodov za vse vaše strani. Za to boste uporabili bodisi getTacoTranslateStaticProps
ali getTacoTranslateServerSideProps
glede na vaše zahteve.
Te funkcije sprejemajo tri argumente: en Next.js Static Props Context objekt, konfiguracijo za TacoTranslate in neobvezne Next.js lastnosti. Upoštevajte, da je revalidate
na getTacoTranslateStaticProps
privzeto nastavljen na 60, da vaše prevode ostanejo ažurni.
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!"/>;
}
Sedaj bi morali lahko uporabljali 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: Postavite v živo in testirajte!
Končali smo! Vaša Next.js aplikacija bo zdaj samodejno prevedena, ko dodate kakršne koli nize v komponento Translate
. Upoštevajte, da bodo lahko nova besedila za prevod ustvarjala samo okolja, ki imajo na API ključu dovoljenja read/write
. Priporočamo, da imate zaprto in varno testno okolje, kjer lahko preizkusite svojo produkcijsko aplikacijo z takšnim API ključem in dodajate nove nize pred objavo. To bo preprečilo, da bi kdorkoli ukradel vaš skrivni API ključ in morebiti prekomerno napolnil vaš prevajalski projekt z novimi, nepovezanimi nizi.
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!