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

Hoe het werkt

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

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

Deze handleiding is bedoeld voor Next.js-toepassingen die gebruikmaken van de Pages Router.
Als je de App Router gebruikt, bekijk dan in plaats daarvan deze handleiding.

Stap 1: Installeer een i18n-bibliotheek

Om internationalisatie in uw Next.js-toepassing 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 automatisch uw teksten naar elke taal met behulp van geavanceerde AI en bevrijdt 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 bijbehorende API-sleutels aan te maken. 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 aan en één read/write sleutel. 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 locale code. In dit voorbeeld stellen we deze in op en voor Engels.
• TACOTRANSLATE_ORIGIN: De “map” waar je strings worden opgeslagen, zoals 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 in je applicatie te integreren, moet je een client aanmaken met de eerder verkregen 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 het later gemakkelijker om opnieuw te gebruiken. Nu voegen we, met behulp 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 hierboven genoemde eigenschappen en code.

Stap 4: Implementatie van server side rendering

TacoTranslate maakt server-side rendering van je vertalingen mogelijk. Dit verbetert de gebruikerservaring aanzienlijk doordat vertaalde inhoud direct wordt weergegeven, in plaats van eerst een korte flits van onvertaalde inhoud. Daarnaast kunnen we netwerkverzoeken aan de clientkant overslaan, omdat we al alle benodigde vertalingen 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 om bij jouw setup te passen. Als true is, zal TacoTranslate de publieke API-sleutel gebruiken. Als we ons in een lokale, test- of staging-omgeving bevinden (isProduction is false), zullen we de geheime read/write API-sleutel gebruiken om ervoor te zorgen dat nieuwe teksten ter vertaling worden gestuurd.

Tot nu toe hebben we de Next.js-applicatie alleen ingesteld met een lijst van ondersteunde talen. De volgende stap is het ophalen van vertalingen voor al je pagina’s. Hiervoor gebruik je ofwel getTacoTranslateStaticProps of getTacoTranslateServerSideProps afhankelijk 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 op een pagina te gebruiken, laten we aannemen dat je een paginabestand 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 teksten binnen al je React-componenten te vertalen.

import {Translate} from 'tacotranslate/react';

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

Stap 5: Implementeren en testen!

We zijn klaar! Je Next.js-applicatie zal nu automatisch worden vertaald wanneer je strings toevoegt aan een Translate component. Let op dat alleen omgevingen met read/write rechten op de API-sleutel nieuwe strings kunnen aanmaken om te vertalen. We raden aan om een gesloten en beveiligde staging-omgeving te hebben waar je je productie-applicatie 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 met nieuwe, niet-gerelateerde strings.

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!