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

Hoe het werkt

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

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

Deze handleiding is bedoeld voor Next.js-applicaties die de Pages Router gebruiken.
Als u de App Router gebruikt, bekijkt u dan in plaats daarvan deze handleiding.

Stap 1: Installeer een i18n-bibliotheek

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

TacoTranslate vertaalt uw strings automatisch naar elke taal met behulp van geavanceerde AI en ontlast u van het moeizame 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, een vertaalproject en de bijbehorende API-sleutels aan te maken. Maak hier een account aan. Het is gratis en je hoeft geen creditcard op te geven.

Maak binnen de TacoTranslate-applicatie-UI een project aan en ga naar het tabblad API-sleutels. Maak een read sleutel, en een read/write sleutel. We slaan ze op als omgevingsvariabelen. De read sleutel is wat we public noemen en de read/write sleutel is secret. Je kunt ze bijvoorbeeld 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 de geheime read/write API-sleutel nooit lekt naar client-side productieomgevingen.

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

• TACOTRANSLATE_DEFAULT_LOCALE: De standaard fallback-localecode. In dit voorbeeld zetten we deze op en voor Engels.
• TACOTRANSLATE_ORIGIN: De “map” waarin uw strings worden opgeslagen, zoals de URL van uw website. Lees hier meer over origins.

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

Stap 3: TacoTranslate instellen

Om TacoTranslate in uw applicatie te integreren, moet u een client aanmaken met de eerder genoemde API-sleutels. 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 hergebruik later eenvoudiger. Nu voegen we, met 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 bovenstaande eigenschappen en code.

Stap 4: Implementatie van server-side rendering

TacoTranslate maakt het mogelijk om je vertalingen aan de serverzijde te renderen. Dit verbetert de gebruikerservaring aanzienlijk doordat vertaalde inhoud direct wordt weergegeven, in plaats van dat er eerst een flits van onvertaalde inhoud verschijnt. Bovendien kunnen we netwerkverzoeken op de client overslaan, omdat we al alle vertalingen hebben die we nodig hebben.

We beginnen met het aanmaken of wijzigen 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 zodat deze bij uw setup past. Als true, zal TacoTranslate de publieke API-sleutel tonen. Als we ons in een lokale, test- of stagingomgeving bevinden (isProduction is false), gebruiken we de geheime read/write API-sleutel om ervoor te zorgen dat nieuwe strings voor vertaling worden verzonden.

Tot nu toe hebben we de Next.js-applicatie alleen ingesteld met een lijst van ondersteunde talen. Het volgende wat we zullen doen is vertalingen ophalen voor al je pagina's. Om dat te doen, gebruik je ofwel getTacoTranslateStaticProps of getTacoTranslateServerSideProps op basis van je vereisten.

Deze functies nemen drie argumenten: één Next.js Static Props Context object, configuratie voor TacoTranslate en optionele Next.js-eigenschappen. Houd er rekening mee dat revalidate op 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 aannemen 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 de Translate component moeten kunnen gebruiken om strings binnen al je React-componenten te vertalen.

import {Translate} from 'tacotranslate/react';

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

Stap 5: Uitrollen en testen!

We zijn klaar! Je Next.js-applicatie wordt nu automatisch vertaald wanneer je strings toevoegt aan een Translate component. Let op: alleen omgevingen met read/write rechten op de API-sleutel kunnen nieuwe strings aanmaken om te laten vertalen. We raden aan een gesloten en beveiligde staging-omgeving te gebruiken waar je je productieapplicatie met zo’n API-sleutel kunt testen en 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.

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!