Hoe internationalisatie te implementeren in een Next.js-applicatie die gebruikmaakt van de Pages Router

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

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

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

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 gebruiken we echter TacoTranslate.

TacoTranslate vertaalt uw strings automatisch 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 API-sleutels. Maak een read sleutel aan, 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. 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 de geheime read/write API-sleutel nooit lekt naar productieomgevingen aan de clientzijde.

We zullen ook nog twee omgevingsvariabelen toevoegen: 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 zo 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 eigenschappen en 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. Bovendien kunnen we netwerkverzoeken aan de clientkant overslaan, omdat we al alle benodigde vertalingen 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 zodat deze past bij jouw setup. Als true is, zal TacoTranslate de openbare 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 worden verzonden voor vertaling.

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

Deze functies hebben drie argumenten nodig: een Next.js Static Props Context object, configuratie voor TacoTranslate en optionele Next.js eigenschappen. Houd er rekening mee dat revalidate op getTacoTranslateStaticProps standaard op 60 staat, zodat uw vertalingen up-to-date blijven.

Als u een van beide functies op een pagina wilt gebruiken, gaan we ervan uit dat u 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 in staat moeten zijn om de Translate component te gebruiken om strings binnen al je React-componenten te vertalen.

import {Translate} from 'tacotranslate/react';

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

Stap 5: Deployen en testen!

We zijn klaar! Je React-applicatie wordt nu automatisch vertaald wanneer je teksten toevoegt aan een Translate component. Let op dat alleen omgevingen met read/write machtigingen op de API-sleutel nieuwe teksten kunnen aanmaken om te vertalen. Wij raden aan om een gesloten en beveiligde staging-omgeving te hebben waarin je je productieapplicatie kunt testen met zo’n API-sleutel, zodat je nieuwe teksten kunt toevoegen voordat je live gaat. Dit voorkomt dat iemand je geheime API-sleutel steelt en mogelijk je vertaalproject opzadelt met nieuwe, niet-gerelateerde teksten.

Zorg ervoor dat je het volledige voorbeeld op onze GitHub-pagina bekijkt. Daar vind je ook een voorbeeld van hoe je dit kunt doen met behulp van de App Router! Mocht je problemen ondervinden, aarzel dan niet om contact op te nemen, wij helpen je graag.

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