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

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 hovedmå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 eksemplet her.

Denne veiledningen er for Next.js-applikasjoner som bruker Pages Router.
Hvis du bruker App Router, se denne veiledningen i stedet.

Trinn 1: Installer et i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, skal vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. I dette eksemplet kommer vi derimot til å bruke TacoTranslate.

TacoTranslate oversetter automatisk tekstene dine til alle språk ved hjelp av banebrytende 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

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 en read nøkkel og en read/write nøkkel. Vi lagrer 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 rotmappen til prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sørg for å aldri lekke den hemmelige read/write API-nøkkelen i produksjonsmiljøer på klientsiden.

Vi legger også til to ekstra miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalekode. I dette eksempelet setter vi den til en 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 nevnt tidligere. Opprett for eksempel 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 egendefinert /pages/_app.tsx, skal 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.

Trinn 4: Implementering av rendering på serversiden

TacoTranslate støtter server-side rendering av oversettelsene dine. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for et kort øyeblikk med uoversatt innhold først. 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'),
	});
};

Tilpass isProduction sjekken til oppsettet ditt. Hvis true, vil TacoTranslate gjøre den offentlige API-nøkkelen tilgjengelig. Hvis vi er i et lokalt, test- eller staging-miljø (isProduction is false), vil vi bruke den hemmelige read/write API-nøkkelen for å sørge for at nye strenger sendes for oversettelse.

Hittil har vi bare satt opp 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 dine behov.

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! React-applikasjonen din 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 som skal oversettes. Vi anbefaler at du har 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 gjøre oversettelsesprosjektet ditt større ved å legge til nye, ikke-relaterte strenger.

Husk å sjekke ut det komplette eksemplet på vår GitHub-profil. Der finner du også et eksempel på hvordan du kan gjøre dette ved bruk av App Router! Hvis du støter på problemer, ta gjerne kontakt, så hjelper vi deg mer enn gjerne.

TacoTranslate lar deg raskt og automatisk lokalisere React-applikasjonene dine til og fra over 75 språk. Kom i gang i dag!