Hvordan implementere internasjonalisering i en Next.js-applikasjon som bruker Pages Router

Ettersom verden blir mer globalisert, blir det stadig viktigere for webutviklere å lage applikasjoner som kan imøtekomme brukere fra forskjellige land og kulturer. En av nøkkelmetodene for å oppnå dette er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike 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 guiden er for Next.js-applikasjoner som bruker Pages Router.
Hvis du bruker App Router, vennligst se denne guiden i stedet.

Steg 1: Installer et i18n-bibliotek

For å implementere internasjonalisering i din Next.js-applikasjon, velger vi først et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksempelet skal vi imidlertid bruke TacoTranslate.

TacoTranslate oversetter automatisk dine strenger til hvilket som helst språk ved hjelp av avansert AI, og frigjør deg fra det tidkrevende arbeidet med å håndtere 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 gå 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 kaller vi 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 produksjonsmiljøer på klientsiden.

Vi vil også legge til to miljøvariabler til: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standardspråkkoden som brukes som reserve. I dette eksempelet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "Mappen" hvor strengene dine blir 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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.

Å lage klienten i en egen fil gjør det enklere å bruke den igjen senere. Nå, ved å bruke en tilpasset /pages/_app.tsx, vil vi legge til TacoTranslate provideren.

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 ovenfor.

Steg 4: Implementering av server-side rendering

TacoTranslate tillater server-side rendering av dine oversettelser. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for først å vise et glimt av uoversatt innhold. I tillegg kan vi hoppe over nettverksforespørsler på klienten, fordi vi allerede har alle oversettelsene vi trenger.

Vi starter 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.

Til nå 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 bruker du enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på dine krav.

Disse funksjonene tar tre argumenter: Ett Next.js Static Props Context objekt, konfigurasjon for TacoTranslate og valgfrie Next.js egenskaper. Vær oppmerksom på at revalidate på getTacoTranslateStaticProps er satt til 60 som standard, slik at oversettelsene dine holder seg oppdatert.

For å bruke begge funksjonene på 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 React-komponentene dine.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Steg 5: Distribuer og test!

Vi er ferdige! Din React-applikasjon vil nå bli oversatt automatisk når du legger til tekststrenger i en Translate komponent. Merk 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 sikkert staging-miljø der 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 oppblåser oversettelsesprosjektet ditt ved å legge til nye, irrelevante tekststrenger.

Pass på å se det komplette eksemplet på vår GitHub-profil. Der finner du også et eksempel på hvordan du gjør 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 lokaltilpasse dine React-applikasjoner raskt til og fra alle språk. Kom i gang i dag!