Hoe om internasionalisering in 'n Next.js-toepassing wat die Pages Router gebruik te implementeer

Naarmate die wêreld meer geglobaliseer raak, is dit al hoe belangriker dat webontwikkelaars toepassings bou wat gebruikers uit verskillende lande en kulture kan bedien. Een van die belangrikste maniere om dit te bereik, is deur internasionalisering (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 internasionalisering by jou React Next.js-toepassing te voeg, met bedienerkant-weergawing. 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 internasionalisering in jou Next.js-toepassing te implementeer, kies ons eers 'n i18n-biblioteek. Daar is verskeie populêre biblioteke, insluitend next-intl. In hierdie voorbeeld gaan ons egter TacoTranslate.

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

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

npm install tacotranslate

Stap 2: Skep 'n gratis TacoTranslate-rekening

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

In die TacoTranslate-toepassingskoppelvlak, 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 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 in kliëntkant-produksie-omgewings lek nie.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard terugval-lokale kode. In hierdie voorbeeld sal ons dit instel op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die “gids” 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: Om TacoTranslate op te stel

Om TacoTranslate met jou toepassing te integreer, moet jy 'n kliënt skep met behulp van die API-sleutels van vroeër. Skep byvoorbeeld 'n lêer genaamd /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 outomaties TACOTRANSLATE_API_KEY binnekort definieer.

Om die kliënt in 'n aparte lêer te skep, maak dit makliker om dit later 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-renderering

TacoTranslate maak weergawes aan die bedienerkant van jou vertalings moontlik. Dit verbeter die gebruikerservaring aansienlik deur vertaalde inhoud onmiddellik te vertoon, in plaas daarvan dat eers 'n kort flits van onvertaalde inhoud verskyn. Daarbenewens kan ons netwerkversoeke aan die kliëntkant oorslaan, omdat ons reeds al die vertalings het wat ons nodig het.

Ons sal 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 publieke API-sleutel na vore bring. 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 net die Next.js-toepassing opgestel met 'n lys van ondersteunde tale. Die volgende ding wat ons gaan doen, is om vertalings vir al jou bladsye op te haal. Om dit te doen, sal jy óf getTacoTranslateStaticProps of getTacoTranslateServerSideProps gebruik, afhangend van jou vereistes.

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

Om een van die twee funksies in 'n bladsy te gebruik, laat ons aanvaar 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 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 React-toepassing sal nou outomaties vertaal word wanneer jy enige stringe by 'n Translate komponent voeg. Let daarop dat slegs omgewings wat read/write toestemmings op die API-sleutel het, nuwe stringe kan skep wat vertaal moet word. Ons beveel aan om 'n geslote en beveiligde staging-omgewing te hê waar jy jou produksietoepassing met 'n API-sleutel soos daardie kan toets, en nuwe stringe kan byvoeg voordat jy dit in produksie stel. Dit sal verhoed dat enigiemand enigiemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek opblaas deur nuwe, ongerelateerde stringe by te voeg.

Maak seker om die volledige voorbeeld te bekyk op ons GitHub-profiel. Daar sal jy ook 'n voorbeeld vind van hoe om dit met die App Router te doen! As jy enige probleme ondervind, voel vry om ons te kontak, en ons help jou graag.

TacoTranslate laat jou toe om jou React-toepassings outomaties vinnig na en van meer as 75 tale te lokaliseer. Begin vandag!