Hvordan implementere internasjonalisering i en Next.js-applikasjon som bruker Pages Router
Gjør React-applikasjonen din mer tilgjengelig og nå nye markeder med internasjonalisering (i18n).
Ettersom verden blir mer globalisert, blir det stadig viktigere for webutviklere å bygge applikasjoner som kan imøtekomme brukere fra forskjellige land og kulturer. En av de viktigste måtene å oppnå dette på er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til forskjellige språk, valutaer og datoformater.
I denne veiledningen skal vi utforske hvordan du legger til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Se det komplette eksemplet her.
Denne guiden er for Next.js-applikasjoner som bruker Pages Router.
Hvis du bruker App Router, vennligst se denne guiden i stedet.
Trinn 1: Installer et i18n-bibliotek
For å implementere internasjonalisering i din Next.js-applikasjon, vil vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksempelet vil vi imidlertid bruke TacoTranslate.
TacoTranslate oversetter automatisk strengene dine til hvilket som helst språk ved hjelp av avansert AI, og frigjør deg fra det tidkrevende arbeidet med å administrere JSON-filer.
La oss installere det ved å bruke npm i terminalen din:
npm install tacotranslate
Steg 2: Opprett en gratis TacoTranslate-konto
Nå som du har installert modulen, er det på tide å opprette din TacoTranslate-konto, et oversettelsesprosjekt og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og krever ikke at du legger til et kredittkort.
Innenfor TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt, og naviger til fanen for API-nøkler. Opprett en read
nøkkel, og en read/write
nøkkel. Vi vil lagre dem som miljøvariabler. read
nøkkelen er det vi kaller public
og read/write
nøkkelen er secret
. For eksempel kan du legge dem til i en .env
fil i roten av prosjektet ditt.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pass på å aldri lekke den hemmelige read/write
API-nøkkelen til klient-side produksjonsmiljøer.
Vi vil også legge til to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standard tilbakestillingslokalkode. I dette eksemplet setter vi den tilen
for engelsk.TACOTRANSLATE_ORIGIN
: "Mappen" hvor strengene dine vil bli lagret, som for eksempel URL-en til nettsiden din. Les mer om origins her.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Trinn 3: Sette opp TacoTranslate
For å integrere TacoTranslate med applikasjonen din, må du opprette en klient ved å bruke API-nøklene fra tidligere. For eksempel kan du opprette en fil med navnet /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;
Vi vil automatisk definere TACOTRANSLATE_API_KEY
om kort tid.
Å opprette klienten i en egen fil gjør det enklere å bruke den igjen senere. Nå, ved å bruke en tilpasset /pages/_app.tsx
, legger vi til TacoTranslate
leverandøren.
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>
);
}
Hvis du allerede har tilpassede pageProps
og _app.tsx
, vennligst utvid definisjonen med egenskapene og koden fra ovenfor.
Steg 4: Implementering av server-side rendering
TacoTranslate tillater server-side rendering av oversettelsene dine. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for først en blink med uoversatt innhold. I tillegg kan vi hoppe over nettverksforespørsler på klienten, fordi vi allerede har alle oversettelsene vi trenger.
Vi begynner med å opprette eller endre /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'),
});
};
Endre isProduction
-kontrollen slik at den passer til oppsettet ditt. Hvis true
, vil TacoTranslate vise den offentlige API-nøkkelen. Hvis vi er i et lokalt, test- eller iscenesettelsesmiljø (isProduction
is false
), bruker vi den hemmelige read/write
API-nøkkelen for å sikre at nye strenger sendes til oversettelse.
Hittil har vi bare satt opp Next.js-applikasjonen med en liste over støttede språk. Det neste vi skal gjøre er å hente oversettelser for alle sidene dine. For å gjøre det, vil du bruke enten getTacoTranslateStaticProps
eller getTacoTranslateServerSideProps
basert på dine behov.
Disse funksjonene tar tre argumenter: Ett Next.js Static Props Context objekt, konfigurasjon for TacoTranslate, og valgfrie Next.js-egenskaper. Merk at revalidate
på getTacoTranslateStaticProps
er satt til 60 som standard, slik at oversettelsene dine holdes oppdaterte.
For å bruke en av funksjonene i en side, la oss anta at du har en sidefil som /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!"/>;
}
Du skal nå kunne bruke Translate
komponenten for å oversette tekststrenger i alle dine React-komponenter.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Trinn 5: Distribuer og test!
Vi er ferdige! Din React-applikasjon vil nå automatisk bli oversatt når du legger til tekststrenger i en Translate
komponent. Vær oppmerksom på at kun miljøer med read/write
tillatelser på API-nøkkelen vil kunne opprette nye tekststrenger som skal oversettes. Vi anbefaler å ha et lukket og sikret staging-miljø hvor du kan teste produksjonsapplikasjonen din med en slik API-nøkkel, og legge til nye tekststrenger før du går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt utvider oversettelsesprosjektet ditt med nye, irrelevante tekststrenger.
Sørg for å sjekke ut det komplette eksemplet på vår GitHub-profil. Der finner du også et eksempel på hvordan du kan gjøre dette med App Router! Hvis du støter på problemer, ikke nøl med å ta kontakt, så hjelper vi deg mer enn gjerne.
TacoTranslate lar deg automatisk lokal tilpasse React-applikasjonene dine raskt til og fra alle språk. Kom i gang i dag!