Hoe internationale ondersteuning te implementeren in een Next.js-applicatie die de Pages Router gebruikt

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

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

Deze gids is voor Next.js-toepassingen die de Pages Router gebruiken.
Als u de App Router gebruikt, bekijkt u in plaats daarvan deze gids.

Stap 1: Installeer een i18n-bibliotheek

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

TacoTranslate vertaalt je teksten automatisch naar elke taal met behulp van geavanceerde AI, en bevrijdt je van het moeizame beheer van JSON-bestanden.

Laten we het installeren met npm in je 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 het vereist geen creditcard.

Binnen de TacoTranslate applicatie-UI, maak een project aan en ga naar het tabblad met API-sleutels. Maak één read sleutel en één read/write sleutel aan. We zullen deze opslaan als omgevingsvariabelen. De read sleutel noemen we public 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 u de geheime read/write API-sleutel nooit lekt naar productieomgevingen aan de clientzijde.

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

• TACOTRANSLATE_DEFAULT_LOCALE: De standaard terugvallocale code. In dit voorbeeld stellen we deze in op en voor Engels.
• TACOTRANSLATE_ORIGIN: De “map” waar jouw 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 je applicatie te integreren, moet je een client aanmaken met behulp van de eerder genoemde API-sleutels. Maak bijvoorbeeld een bestand aan 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 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 clientzijde overslaan, omdat we al alle benodigde vertalingen hebben.

We beginnen met het maken 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 bij je setup past. Als true is, zal TacoTranslate de publieke API-sleutel gebruiken. Als we ons in een lokale, test- of staging-omgeving 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. De volgende stap is om vertalingen op te halen voor al je pagina's. Hiervoor gebruik je ofwel getTacoTranslateStaticProps of getTacoTranslateServerSideProps, afhankelijk van je behoeften.

Deze functies nemen drie argumenten aan: 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, gaan we ervan uit 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 tekststrings 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-toepassing wordt nu automatisch 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 waarin je je productie-applicatie kunt testen met zo'n API-sleutel, waarbij je nieuwe strings toevoegt voordat je live gaat. Dit voorkomt dat iemand je geheime API-sleutel steelt en mogelijk je vertaalproject opzadelt met nieuwe, niet-gerelateerde strings.

Zorg ervoor dat je het complete voorbeeld bekijkt op ons GitHub-profiel. Daar vind je ook een voorbeeld van hoe je dit kunt doen met behulp van de App Router ! Als je problemen tegenkomt, neem dan gerust contact op, we helpen je graag.

TacoTranslate stelt je in staat om je React-applicaties snel en automatisch te lokaliseren van en naar meer dan 75 talen. Begin vandaag nog!