De beste oplossing voor internationalisatie (i18n) in Next.js-apps

Hoe het werkt

Naarmate de wereld meer globaliseert, wordt het voor webontwikkelaars steeds belangrijker om applicaties te bouwen die kunnen voldoen aan gebruikers uit verschillende landen en culturen. Een van de belangrijkste manieren om dit te bereiken is door internationalisatie (i18n), waarmee je je applicatie kunt aanpassen aan verschillende talen, valuta en datumformaten.

In deze tutorial verkennen we hoe je internationalisatie toevoegt aan je React Next.js-applicatie, met server side rendering. TL;DR: Zie het volledige voorbeeld hier.

Deze gids is voor Next.js-toepassingen die gebruikmaken van de Pages Router.
Als u de App Router gebruikt, zie dan in plaats daarvan deze gids.

Stap 1: Installeer een i18n-bibliotheek

Om internationalisering in uw Next.js-applicatie te implementeren, kiezen we eerst een i18n-bibliotheek. Er zijn verschillende populaire bibliotheken, waaronder next-intl. In dit voorbeeld gebruiken we echter TacoTranslate.

TacoTranslate vertaalt uw strings automatisch naar elke taal met behulp van geavanceerde AI, en bevrijdt u van het saaie beheer van JSON-bestanden.

Laten we het installeren met npm in uw terminal:

npm install tacotranslate

Stap 2: Maak een gratis TacoTranslate-account aan

Nu je de module hebt geïnstalleerd, is het tijd om je TacoTranslate-account aan te maken, een vertaalproject te starten en de bijbehorende API-sleutels te genereren. Maak hier een account aan. Het is gratis en je hoeft geen creditcard toe te voegen.

Binnen de TacoTranslate applicatie-UI, maak een project aan en navigeer naar het tabblad met API-sleutels. Maak één read sleutel en één read/write sleutel aan. We slaan deze op als omgevingsvariabelen. De read sleutel noemen we public en de read/write sleutel is secret. Bijvoorbeeld, je kunt ze toevoegen aan een .env bestand in de root van je project.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Zorg ervoor dat je nooit de geheime read/write API-sleutel lekt naar productieomgevingen aan de clientzijde.

We voegen ook nog twee omgevingsvariabelen toe: TACOTRANSLATE_DEFAULT_LOCALE en TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: De standaard fallback-locatienaamcode. In dit voorbeeld zetten we deze op en voor Engels.
• TACOTRANSLATE_ORIGIN: De "map" waarin je strings worden opgeslagen, bijvoorbeeld de URL van je website. Lees hier meer over origins.

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

Stap 3: TacoTranslate instellen

Om TacoTranslate met uw applicatie te integreren, moet u een client maken met behulp van de API-sleutels van eerder. Maak bijvoorbeeld een bestand met de naam /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;

We zullen binnenkort automatisch TACOTRANSLATE_API_KEY definiëren.

Het aanmaken van de client in een apart bestand maakt het later gemakkelijker om deze opnieuw te gebruiken. Nu voegen we, met gebruik van een aangepaste /pages/_app.tsx, de TacoTranslate provider toe.

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>
	);
}

Als je al aangepaste pageProps en _app.tsx hebt, breid dan de definitie uit met de eigenschappen en de code van hierboven.

Stap 4: Server-side rendering implementeren

TacoTranslate maakt server-side rendering van je vertalingen mogelijk. Dit verbetert de gebruikerservaring aanzienlijk door direct vertaalde inhoud te tonen, in plaats van eerst een korte flits van niet-vertaalde inhoud. Daarnaast kunnen we netwerkverzoeken aan de client kant overslaan, omdat we al alle vertalingen die we nodig hebben, beschikbaar hebben.

We beginnen met het aanmaken of aanpassen van /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'),
	});
};

Pas de isProduction controle aan om bij jouw setup te passen. Als true is, zal TacoTranslate de publieke API-sleutel tonen. Als we in een lokale, test- of stagingomgeving zitten (isProduction is false), gebruiken we de geheime read/write API-sleutel om ervoor te zorgen dat nieuwe strings worden verzonden voor vertaling.

Tot nu toe hebben we de Next.js-applicatie alleen opgezet met een lijst van ondersteunde talen. Het volgende wat we gaan doen is vertalingen ophalen voor al je pagina’s. Hiervoor gebruik je ofwel getTacoTranslateStaticProps of getTacoTranslateServerSideProps afhankelijk van je behoeften.

Deze functies nemen drie argumenten: een Next.js Static Props Context object, configuratie voor TacoTranslate, en optionele Next.js-eigenschappen. Let op dat revalidate bij getTacoTranslateStaticProps standaard is ingesteld op 60, zodat je vertalingen up-to-date blijven.

Om een van beide functies in een pagina te gebruiken, laten we ervan uitgaan dat je een pagina bestand hebt zoals /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!"/>;
}

Je zou nu het Translate component moeten kunnen gebruiken om teksten te vertalen binnen al je React-componenten.

import {Translate} from 'tacotranslate/react';

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

Stap 5: Deployen en testen!

We zijn klaar! Je Next.js-applicatie wordt nu automatisch vertaald zodra je strings toevoegt aan een Translate component. Houd er rekening mee dat alleen omgevingen met read/write permissies op de API-sleutel nieuwe strings kunnen aanmaken om te vertalen. We raden aan een gesloten en beveiligde staging-omgeving te hebben waarin je je productieapplicatie kunt testen met zo'n API-sleutel, zodat je nieuwe strings kunt toevoegen voordat je live gaat. Dit voorkomt dat iemand je geheime API-sleutel steelt en mogelijk je vertaalproject opblaast door nieuwe, niet-gerelateerde strings toe te voegen.

Zorg ervoor dat je het volledige voorbeeld bekijkt op ons GitHub-profiel. Daar vind je ook een voorbeeld van hoe je dit doet met behulp van de App Router ! Mocht je problemen ondervinden, neem dan gerust contact met ons op, we helpen je graag.

TacoTranslate stelt je in staat om je React-applicaties snel en automatisch te lokaliseren naar en vanuit elke taal. Begin vandaag nog!