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).
Etter hvert som verden blir mer globalisert, blir det stadig viktigere for nettutviklere å lage applikasjoner som kan dekke behovene til brukere fra ulike 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 hele eksempelet her.
Denne veiledningen er for Next.js-applikasjoner som bruker Pages Router.
Hvis du bruker App Router, vennligst se denne veiledningen i stedet.
Trinn 1: Installer et i18n-bibliotek
For å implementere internasjonalisering i din Next.js-applikasjon, skal vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksempelet skal vi imidlertid bruke TacoTranslate.
TacoTranslate oversetter automatisk strengene dine til alle språk ved hjelp av avansert AI, og frigjør deg fra den tidkrevende håndteringen av JSON-filer.
La oss installere det ved å bruke npm i terminalen din:
npm install tacotranslate
Trinn 2: Opprett en gratis TacoTranslate-konto
Nå som du har installert modulen, er det på tide å opprette TacoTranslate-kontoen din, et oversettelsesprosjekt og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og krever ikke at du oppgir et kredittkort.
I TacoTranslate-applikasjonens brukergrensesnitt oppretter du et prosjekt og går til fanen for API-nøkler. Opprett én read
nøkkel og én read/write
nøkkel. Vi lagrer dem som miljøvariabler. Den 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 rotmappen til prosjektet ditt.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pass på å aldri lekke den hemmelige read/write
API-nøkkelen til produksjonsmiljøer på klientsiden.
Vi legger også til to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE
og TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Standard fallback-lokalekode. I dette eksemplet setter vi den tilen
for engelsk.TACOTRANSLATE_ORIGIN
: “mappen” der strengene dine vil bli lagret, for eksempel URL-en til nettstedet ditt. 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 som bruker 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
snart.
Å opprette klienten i en egen fil gjør det enklere å bruke den igjen senere. Nå, ved å bruke en egendefinert /pages/_app.tsx
, legger vi til TacoTranslate
provider.
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 egendefinerte pageProps
og _app.tsx
, vennligst utvid definisjonen med egenskapene og koden fra ovenfor.
Steg 4: Implementering av server-side rendering
TacoTranslate tillater server-side-gjengivelse av oversettelsene dine. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for først å vise et øyeblikk med uoversatt innhold. I tillegg kan vi unngå 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
-sjekken for å passe til ditt oppsett. Hvis true
, vil TacoTranslate bruke den offentlige API-nøkkelen. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction
is false
), vil vi bruke den hemmelige read/write
API-nøkkelen for å sikre at nye strenger sendes for oversettelse.
Hittil har vi bare konfigurert Next.js-applikasjonen med en liste over støttede språk. Neste steg er å hente oversettelser for alle sidene dine. For å gjøre det, bruker du enten getTacoTranslateStaticProps
eller getTacoTranslateServerSideProps
avhengig av kravene dine.
Disse funksjonene tar tre argumenter: Et 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 oppdatert.
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 til å oversette strenger i alle React-komponentene dine.
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å bli oversatt automatisk når du legger til strenger i en Translate
komponent. Merk at kun miljøer med read/write
tillatelser på API-nøkkelen vil kunne opprette nye strenger for oversettelse. 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 strenger før du går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt oppblåse oversettelsesprosjektet ditt ved å legge til nye, ikke-relaterte strenger.
Husk å sjekke ut det komplette eksempelet på vår GitHub‑profil. Der finner du også et eksempel på hvordan du gjør dette ved bruk av App Router! Hvis du støter på problemer, ta gjerne kontakt, så hjelper vi mer enn gjerne.
TacoTranslate lar deg automatisk lokalisere React-applikasjonene dine raskt til og fra mer enn 75 språk. Kom i gang i dag!