Den bedste løsning til internationalisering (i18n) i Next.js-apps

Hvordan det fungerer

Efterhånden som verden bliver mere globaliseret, bliver det stadig vigtigere for webudviklere at bygge applikationer, der kan imødekomme brugere fra forskellige lande og kulturer. En af de vigtigste måder at opnå dette på er gennem internationalisering (i18n), som gør det muligt for dig at tilpasse din applikation til forskellige sprog, valutaer og datoformater.

I denne vejledning vil vi undersøge, hvordan du tilføjer internationalisering til din React Next.js-applikation med server-side rendering. TL;DR: Se det fulde eksempel her.

Denne guide er til Next.js-applikationer, der bruger Pages Router.
Hvis du bruger App Router, se venligst denne guide i stedet.

Trin 1: Installer et i18n-bibliotek

For at implementere internationalisering i din Next.js-applikation, vælger vi først et i18n-bibliotek. Der findes flere populære biblioteker, herunder next-intl. Dog vil vi i dette eksempel bruge TacoTranslate.

TacoTranslate oversætter automatisk dine strenge til ethvert sprog ved hjælp af banebrydende AI og befrier dig for det kedelige arbejde med at håndtere JSON-filer.

Lad os installere det med npm i din terminal:

npm install tacotranslate

Trin 2: Opret en gratis TacoTranslate-konto

Nu hvor du har installeret modulet, er det tid til at oprette din TacoTranslate-konto, et oversættelsesprojekt og tilhørende API-nøgler. Opret en konto her. Det er gratis, og kræver ikke, at du tilføjer et kreditkort.

Inden for TacoTranslate applikationens brugerflade, opret et projekt, og naviger til fanen for API-nøgler. Opret en read nøgle og en read/write nøgle. Vi gemmer dem som miljøvariabler. read nøglen kalder vi public og read/write nøglen er secret. For eksempel kan du tilføje dem til en .env fil i roden af dit projekt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sørg for aldrig at lække den hemmelige read/write API-nøgle til klient-side produktionsmiljøer.

Vi tilføjer også to flere miljøvariabler: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-sprogkode. I dette eksempel sætter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Den "mappe", hvor dine strenge gemmes, f.eks. URL’en til dit website. Læs mere om origins her.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Trin 3: Opsætning af TacoTranslate

For at integrere TacoTranslate med din applikation, skal du oprette en klient ved hjælp af API-nøglerne fra tidligere. Opret 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 snart automatisk definere TACOTRANSLATE_API_KEY.

At oprette klienten i en separat fil gør det nemmere at bruge den igen senere. Nu vil vi, ved hjælp af en brugerdefineret /pages/_app.tsx, tilføje 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 tilpassede pageProps og _app.tsx, bedes du udvide definitionen med egenskaberne og koden fra ovenstående.

Trin 4: Implementering af server side rendering

TacoTranslate tillader server-side rendering af dine oversættelser. Dette forbedrer brugeroplevelsen betydeligt ved at vise oversat indhold med det samme, i stedet for først at vise en kortvarig ubearbejdet version. Derudover kan vi undgå netværksanmodninger på klienten, fordi vi allerede har alle de oversættelser, vi har brug for.

Vi starter med at oprette eller ændre /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'),
	});
};

Rediger isProduction -kontrollen, så den passer til din opsætning. Hvis true, vil TacoTranslate vise den offentlige API-nøgle. Hvis vi er i et lokalt, test- eller iscenesættelsesmiljø (isProduction is false), bruger vi den hemmelige read/write -API-nøgle til at sikre, at nye strenge sendes til oversættelse.

Indtil nu har vi kun sat Next.js-applikationen op med en liste over understøttede sprog. Det næste, vi vil gøre, er at hente oversættelser til alle dine sider. For at gøre det vil du bruge enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps afhængigt af dine behov.

Disse funktioner tager tre argumenter: Et Next.js Static Props Context objekt, konfiguration til TacoTranslate og valgfrie Next.js egenskaber. Bemærk, at revalidate på getTacoTranslateStaticProps som standard er sat til 60, så dine oversættelser forbliver opdaterede.

For at bruge en af funktionerne på en side, lad os antage, 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 burde nu kunne bruge Translate komponenten til at oversætte strenge i alle dine React-komponenter.

import {Translate} from 'tacotranslate/react';

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

Trin 5: Udrul og test!

Vi er færdige! Din Next.js-applikation vil nu blive oversat automatisk, når du tilføjer strenge til en Translate komponent. Bemærk, at kun miljøer med read/write tilladelser på API-nøglen vil kunne oprette nye strenge til oversættelse. Vi anbefaler at have et lukket og sikkert staging-miljø, hvor du kan teste din produktionsapplikation med en sådan API-nøgle og tilføje nye strenge, inden du går live. Dette forhindrer, at nogen stjæler din hemmelige API-nøgle og potentielt oppuster dit oversættelsesprojekt ved at tilføje nye, irrelevante strenge.

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!