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

Namate die wêreld meer wêreldwyd raak, word dit al hoe belangriker vir webontwikkelaars om toepassings te bou wat gebruikers van verskillende lande en kulture kan akkommodeer. Een van die sleutelweë om dit te bereik is deur internasionale lokalisasie (i18n), wat jou toelaat om jou toepassing aan te pas by verskillende tale, geldeenhede en datumnotaties.

In hierdie handleiding gaan ons ondersoek hoe om internasionale lokalisasie by jou React Next.js-toepassing te voeg, met bedienerkant-weergawes. TL;DR: Sien die volwaardige 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 internasionaalisering 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.

TacoTranslate vertaal jou stringe outomaties na enige taal deur gebruik te maak van geavanceerde AI, 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

Nou dat jy die module geïnstalleer het, is dit tyd om jou TacoTranslate-rekening, 'n vertaalprojek en die verwante API-sleutels te skep. Skep hier 'n rekening. Dit is gratis, en 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 dit as omgewingsveranderlikes stoor. Die read sleutel is wat ons public noem en die read/write sleutel is secret. Byvoorbeeld, jy kan dit 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 jy nooit die geheime read/write API-sleutel aan kliëntkant-produksie-omgewings uitlek 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 “gids” 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 met jou toepassing te integreer, moet jy 'n kliënt skep wat die API-sleutels van vroeër 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.

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, brei asseblief die definisie uit met die eienskappe en kode van hierbo.

Stap 4: Implementering van bediener-kant rendering

TacoTranslate maak bediener-kant-rendering van jou vertalings moontlik. Dit verbeter die gebruikerservaring aansienlik deur vertaalde inhoud onmiddellik te wys, in plaas daarvan om eers ’n flits van onvertaalde inhoud te vertoon. Boonop kan ons kliënt-kant netwerkversoeke oorslaan, omdat ons reeds al die nodige vertalings 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'),
	});
};

Wysig die isProduction kontrole om by jou opstelling te pas. As dit true, sal TacoTranslate die publieke API-sleutel vertoon. 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 nuwe stringe word vir vertaling gestuur.

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

Hierdie funksies neem drie argumente: een Next.js Static Props Context objek, die 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 enige van die twee funksies in 'n bladsy te gebruik, kom ons aanvaar dat jy 'n bladsylêer soos /pages/hello-world.tsx het.

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 React-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 in staat sal wees om nuwe stringe te 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 lewendig maak. Dit sal verhoed dat enigiemand enigiemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek opblaas deur nuwe, nie-verwante stringe by te voeg.

Maak seker om na die volledige voorbeeld te kyk op ons GitHub‑profiel. Daar vind jy ook 'n voorbeeld van hoe om dit met die App Router te doen! As jy enige probleme ondervind, skroom nie om ons te kontak nie, en ons sal graag help.

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