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

Hoe dit werk

Namate die wêreld meer geglobaliseer raak, word dit al hoe belangriker vir webontwikkelaars om toepassings te bou wat gebruikers uit verskillende lande en kulture kan bedien. Een van die belangrikste maniere om dit te bereik is deur internasionaalisering (i18n), wat jou in staat stel om jou toepassing aan verskillende tale, geldeenhede en datumformate aan te pas.

In hierdie handleiding gaan ons ondersoek hoe om internasionaalisering by jou React Next.js-toepassing te voeg, met bedienerkant-renderering. 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 hierdie gids in plaas daarvan.

Stap 1: Installeer 'n i18n-biblioteek

Om internasionering 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 sal ons egter TacoTranslate gebruik.

TacoTranslate vertaal jou strings outomaties na enige taal deur middel van gevorderde KI, en verlos jou van die vervelige bestuur van JSON-lêers.

Kom ons installeer dit met behulp van npm in jou terminaal:

npm install tacotranslate

Stap 2: Skep 'n gratis TacoTranslate-rekening

Nou jy die module geïnstalleer het, is dit tyd om jou TacoTranslate-rekening, 'n vertaalprojek en die gepaardgaande API-sleutels te skep. Skep 'n rekening hier. Dit is gratis, en jy hoef nie 'n kredietkaart by te voeg nie.

In die TacoTranslate-toepassing se UI, skep 'n projek en navigeer na die API-sleutels-oortjie daarvan. Skep een read sleutel en een read/write sleutel. Ons sal hulle as omgewingveranderlikes stoor. Die read sleutel is wat ons public noem en die read/write sleutel is secret. Byvoorbeeld, jy kan hulle byvoeg in 'n .env lêer in die wortel van jou projek.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Maak seker dat jy nooit die geheime read/write API-sleutel na kliëntkant-produksie-omgewings lek nie.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard plaaslike kode wat as terugval gebruik word. 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 meer oor oorspronge hier.

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

Stap 3: TacoTranslate instel

Om TacoTranslate in jou toepassing te integreer, moet jy 'n kliënt skep wat die API-sleutels van hierbo gebruik. Byvoorbeeld, skep '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.

Deur die kliënt in 'n aparte lêer te plaas, is 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 hierbo.

Stap 4: Implementering van bedienerkant-weergawes

TacoTranslate maak bedienerkant-weergawing van jou vertalings moontlik. Dit verbeter die gebruikerservaring aansienlik deur vertaalde inhoud dadelik te wys, in plaas daarvan dat eers ’n flits van onvertaalde inhoud verskyn. Daarbenewens kan ons netwerkversoeke op die kliënt oorslaan, omdat ons reeds alle nodige vertalings beskikbaar het.

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

Pas die isProduction kontrole aan 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 te verseker dat nuwe stringe vir vertaling gestuur word.

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

Hierdie funksies neem drie argumente: Een Next.js Static Props Context objek, die konfigurasie vir TacoTranslate, en opsionele Next.js-eienskappe. Neem kennis dat revalidate op getTacoTranslateStaticProps standaard op 60 gestel is, sodat jou vertalings op datum bly.

Om enige van die funksies in ’n bladsy te gebruik, kom ons veronderstel jy het ’n bladsylêer 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 in 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. Let daarop dat slegs omgewings met read/write toestemmings op die API-sleutel nuwe stringe sal kan skep wat vertaal moet word. Ons beveel aan om 'n geslote en beveiligde staging-omgewing te hê waar jy jou produksietoepassing met so 'n API-sleutel kan toets en nuwe stringe kan byvoeg voordat jy lewendig gaan. Dit sal verhoed dat iemand iemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek laat opblaas deur nuwe, onverwante 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!