Den beste løsningen for internasjonalisering (i18n) i Next.js-apper

Hvordan det fungerer

Etter hvert som 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 ulike språk, valutaer og datoformater.

I denne veiledningen skal vi se på hvordan du legger til internasjonalisering i din React Next.js-applikasjon med rendering på serversiden. TL;DR: Se hele eksemplet her.

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

Trinn 1: Installer et i18n-bibliotek

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

TacoTranslate oversetter automatisk strengene dine til alle språk ved hjelp av moderne AI, og sparer deg for den tidkrevende håndteringen av JSON-filer.

La oss installere det med 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 din TacoTranslate-konto, 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 opprett et prosjekt og naviger til fanen for API-nøkler. Opprett én read‑nøkkel og én 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 roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sørg for at du aldri lekker den hemmelige read/write API-nøkkelen til produksjonsmiljøer på klientsiden.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempelet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "mappen" hvor tekststrengene 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 i 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 tilpasset /pages/_app.tsx, legger vi 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 som er vist ovenfor.

Steg 4: Implementering av serverside-rendering

TacoTranslate gjør det mulig å rendere oversettelsene dine på serversiden. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for først å vise et blaff av 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 slik at den passer for ditt oppsett. Hvis true, vil TacoTranslate eksponere 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 blir sendt til oversettelse.

Frem til nå 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, vil du bruke enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på 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 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 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!

Da er vi ferdige! Din Next.js-applikasjon vil nå bli oversatt automatisk når du legger til tekststrenger i en Translate komponent. Merk at bare miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger som skal oversettes. Vi anbefaler å ha et lukket og sikret staging-miljø der du kan teste produksjonsversjonen av applikasjonen med en slik API-nøkkel, og legge til nye strenger før du går live. Dette vil hindre at noen noen stjeler din hemmelige API-nøkkel, og potensielt blåse opp oversettelsesprosjektet ditt ved å legge til nye, ikke-relaterte strenger.

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!