Hoe om internasionale oorblywing te implementeer in ’n Next.js-toepassing wat die Pages Router gebruik

Soos die wêreld meer globaliseer, word dit al hoe belangriker vir webontwikkelaars om toepassings te bou wat gebruikers van verskillende lande en kulture kan akkommodeer. Een van die sleutelmaniere om dit te bereik is deur internasiona-lisasie (i18n), wat jou toelaat om jou toepassing aan te pas by verskillende tale, geldeenhede en datumformate.

In hierdie handleiding gaan ons ondersoek hoe om internasiona-lisasie by jou React Next.js-toepassing te voeg, met bediener-kant-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 gevorderde 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

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

Binne die TacoTranslate-toepassings UI, skep ’n projek, en navigeer na die API-sleutel-oortjie daarvan. Skep een read sleutel, en een read/write sleutel. Ons sal dit as omgewingveranderlikes 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 lek na kliëntkant produksie-omgewings nie.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Die verstek-terugval-lokalekode. In hierdie voorbeeld stel ons dit op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die "gids" waar jou stringe gestoor gaan word, soos die URL van jou webwerf. Lees meer oor oorspronge hier.

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

Stap 3: Instel van TacoTranslate

Om TacoTranslate met jou toepassing te integreer, moet jy ʼn kliënt skep met behulp van die API-sleutels vantevore. Byvoorbeeld, skep ʼ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 binnekort outomaties TACOTRANSLATE_API_KEY definieer.

Om die kliënt in ’n aparte lêer te skep, maak dit makliker om later weer te gebruik. Nou, met behulp van ’n pasgemaakte /pages/_app.tsx, gaan 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 ʼn pasgemaakte pageProps en _app.tsx het, brei asseblief die definisie uit met die eienskappe en kode van hierbo.

Stap 4: Implementering van bedienerderkant rendering

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

Modifiseer die isProduction kontrole om by jou opstelling te pas. As dit true is, 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 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 te haal. Om dit te doen, gaan jy óf getTacoTranslateStaticProps óf 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 daarop 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, 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 met read/write toestemmings op die API-sleutel nuwe stringe kan skep om vertaal te word. Ons beveel aan om ʼn geslote en beveiligde staging-omgewing te hê waar jy jou produksietoepassing met so ʼn API-sleutel kan toets, deur nuwe stringe by te voeg voordat dit regstreeks gaan. Dit sal keer dat enigiemand jou geheime API-sleutel steel en moontlik jou vertaalprojek laat oorlaai deur nuwe, nie-verwante stringe by te voeg.

Maak seker om die volledige voorbeeld by ons GitHub-profiel na te gaan. Daar sal jy ook ’n voorbeeld vind van hoe om dit te doen met die gebruik van die App Router ! As jy enige probleme ondervind, voel vry om kontak te maak, en ons sal meer as bly wees om te help.

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