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

As 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 sleutelmaniere om dit te bereik, is deur internasionaalisering (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 internasionaalisering 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 hierdie gids in plaas daarvan.

Stap 1: Installeer 'n i18n-biblioteek

Om internasionalisering 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 met behulp van gevorderde KI, en bevry jou van die eentonige 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 die verwante API-sleutels te skep. Skep 'n rekening hier. Dit is gratis, en vereis nie dat jy 'n kredietkaart byvoeg nie.

Binne 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 omgewingsveranderlikes stoor. Die read sleutel is wat ons public noem en die read/write sleutel is secret. Byvoorbeeld, jy kan hulle byvoeg by '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 aan produksie-omgewings aan die kliëntkant blootstel nie.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard terugval-lokaalkode. In hierdie voorbeeld sal ons dit op en stel 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 in jou toepassing te integreer, moet jy 'n kliënt skep wat die API-sleutels van vroeër 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.

Deur die kliënt in 'n aparte lêer te skep, word 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>
	);
}

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

Stap 4: Implementering van bediener-kant-weergawing

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

Wysig die isProduction kontrole om by jou opstelling te pas. As true, sal TacoTranslate die openbare 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 die Next.js-toepassing slegs opgestel met 'n lys van ondersteunde tale. Die volgende stap is om vertalings vir al jou bladsye op te haal. Om dit te doen, sal jy of 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. Neem kennis dat revalidate op getTacoTranslateStaticProps standaard op 60 gestel is, sodat jou vertalings op datum bly.

Om enige van die twee funksies op 'n bladsy te gebruik, kom 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 strings by 'n Translate komponent voeg. Let wel dat slegs omgewings wat read/write toestemmings op die API-sleutel het, in staat sal wees om nuwe strings te skep wat vertaal moet 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 strings byvoeg voordat dit lewendig gaan. Dit sal voorkom dat enigiemand enigiemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek opblaas deur nuwe, onsamehangende strings by te voeg.

Kyk gerus na die volledige voorbeeld 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, voel vry om ons te kontak, en ons sal meer as graag help.

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