Die beste oplossing vir internasionalisering (i18n) in Next.js-toepassings

Hoe dit werk

Namate die wêreld meer geglobaliseer raak, word dit toenemend belangrik vir webontwikkelaars om toepassings te bou wat gebruikers van verskillende lande en kulture kan bedien. Een van die sleutelmaniere om dit te bereik is deur internasionalisering (i18n), wat jou in staat stel om jou toepassing aan te pas by verskillende tale, geldeenhede en datumformate.

In hierdie handleiding gaan ons verken hoe om internasionalisering by jou React Next.js-toepassing te voeg, met bedienerkant-rendering. TL;DR: Sien die volledige voorbeeld hier.

Hierdie gids is vir Next.js-toepassings wat die Pages Router gebruik.
As jy die App Router gebruik, sien asseblief eerder hierdie gids.

Stap 1: Installeer 'n i18n-biblioteek

Om internasionale ondersteuning in jou Next.js-toepassing te implementeer, sal ons eers 'n i18n-biblioteek kies. Daar is verskeie gewilde biblioteke, insluitend next-intl. In hierdie voorbeeld gaan ons egter TacoTranslate gebruik.

TacoTranslate vertaal jou stringe outomaties na enige taal met behulp van baanbrekende KI, en bevry jou van die vervelige bestuur van JSON-lêers.

Kom ons installeer dit met npm in jou terminal:

npm install tacotranslate

Stap 2: Skep 'n gratis TacoTranslate-rekening

Aangesien jy die module nou geïnstalleer het, is dit tyd om jou TacoTranslate-rekening, 'n vertaalprojek en die geassosieerde API-sleutels te skep. Skep hier 'n rekening. Dit is gratis, en dit vereis nie dat jy 'n kredietkaart byvoeg nie.

Binne die TacoTranslate-toepassing se gebruikerskoppelvlak, skep 'n projek en navigeer na die tabblad vir API-sleutels. Skep een read sleutel en een read/write sleutel. Ons sal hulle as omgewingsveranderlikes stoor. Die read sleutel is wat ons public noem en die read/write sleutel is secret. Byvoorbeeld, jy kan hulle by 'n .env lêer in die wortel van jou projek voeg.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Maak seker dat die geheime read/write API-sleutel nooit in kliënt-side produksie-omgewings gelek word nie.

Ons sal ook nog twee omgewingsveranderlikes byvoeg: TACOTRANSLATE_DEFAULT_LOCALE en TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard terugval-lokaalkode. In hierdie voorbeeld stel ons dit op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die “map” waar jou stringe gestoor sal word, soos die URL van jou webwerf. Lees hier meer oor oorspronge.

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

Stap 3: TacoTranslate opstel

Om TacoTranslate met jou toepassing te integreer, moet jy 'n kliënt skep wat die API-sleutels van hierbo gebruik. Skep byvoorbeeld 'n lêer met die 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;

Ons sal binnekort outomaties TACOTRANSLATE_API_KEY definieer.

Om die kliënt in ’n aparte lêer te skep, maak dit later makliker om dit weer te gebruik. Nou, met ’n pasgemaakte /pages/_app.tsx, sal ons die TacoTranslate verskaffer byvoeg.

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

As jy reeds pasgemaakte pageProps en _app.tsx het, brei asseblief die definisie uit met die eienskappe en kode van hierbo.

Stap 4: Implementering van bedienerkant-weergawing

TacoTranslate maak bedienerkant-rendering van jou vertalings moontlik. Dit verbeter die gebruikerservaring aansienlik deur vertaalde inhoud onmiddellik te vertoon, in plaas van eers 'n flits van onvertaalde inhoud. Daarbenewens kan ons netwerkversoeke op die kliënt oorslaan, omdat ons reeds al die vertalings het wat ons benodig.

Ons begin deur /next.config.js te skep of te wysig.

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

Wysig die isProduction kontrole om by jou opstelling te pas. As true, sal TacoTranslate die openbare API-sleutel openbaar maak. As ons in 'n plaaslike, toets- of staging-omgewing is (isProduction is false), sal ons die geheime read/write API-sleutel gebruik om seker te maak dat nuwe stringe vir vertaling gestuur word.

Tot dusver het ons die Next.js-toepassing slegs opgestel met ’n lys van ondersteunde tale. Die volgende ding wat ons sal doen, is om vertalings vir al jou bladsye te haal. Om dit te doen, sal jy óf getTacoTranslateStaticProps of getTacoTranslateServerSideProps gebruik, gebaseer op jou vereistes.

Hierdie funksies neem drie argumente: een Next.js Static Props Context objek, konfigurasie vir TacoTranslate, en opsionele Next.js-eienskappe. Let wel dat revalidate op getTacoTranslateStaticProps standaard op 60 ingestel is, sodat jou vertalings op datum bly.

Om een van die twee funksies op 'n bladsy te gebruik, kom ons aanvaar dat jy 'n bladsylêer het soos /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!"/>;
}

Jy behoort nou die Translate komponent te kan gebruik om stringe binne al jou React-komponente te vertaal.

import {Translate} from 'tacotranslate/react';

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

Stap 5: Ontplooi en toets!

Ons is klaar! Jou Next.js-toepassing sal nou outomaties vertaal word wanneer jy enige stringe by 'n Translate komponent voeg. Neem kennis dat slegs omgewings met read/write toestemmings op die API-sleutel in staat sal wees om nuwe stringe te skep wat vertaal kan word. Ons beveel aan om 'n geslote en beveiligde staging-omgewing te hê waar jy jou produksie-toepassing met so 'n API-sleutel kan toets, en nuwe stringe kan byvoeg voordat dit live gaan. Dit sal verhoed dat enigiemand enigiemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek opblaas deur nuwe, nie-verwante stringe by te voeg.

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!