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

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 sleutelmetodes om dit te bereik is deur internasiona lisering (i18n), wat jou toelaat om jou toepassing aan te pas by verskillende tale, geldeenhede en datumformate.

In hierdie handleiding gaan ons ondersoek instel na hoe om internasiona lisering 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 in plaas daarvan hierdie gids.

Stap 1: Installeer ’n i18n-biblioteek

Om internasionale ondersteuning in jou Next.js-toepassing te implementeer, gaan 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 terminaal:

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 moet byvoeg nie.

Binne die TacoTranslate-toepassingskoppelvlak, skep 'n projek, en navigeer na die API-sleutels-oortjie daarvan. 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 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 na kliëntkant produksie-omgewings lek nie.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard rugval locale-kode. In hierdie voorbeeld stel ons dit op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die “lêergids” 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: Opstel van TacoTranslate

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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.

Die kliënt in ’n aparte lêer skep maak dit makliker om dit later weer te gebruik. Nou, met behulp van ’n gespesialiseerde /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 aangepaste pageProps en _app.tsx het, 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 dadelik te vertoon, in plaas van eers ’n flits van onvertaalde inhoud. Daarbenewens 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 aan te pas.

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 is, 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 slegs die Next.js-toepassing opgestel met 'n lys ondersteunde tale. Die volgende ding wat ons sal doen is om vertalings vir al jou bladsye te haal. Om dit te doen, sal jy óf getTacoTranslateStaticProps óf getTacoTranslateServerSideProps gebruik op grond van jou vereistes.

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

Om een van die funksies op 'n bladsy te gebruik, laat ons aanvaar dat u 'n bladsylêer soos /pages/hello-world.tsxhet.

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 permissies 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, en nuwe stringe kan byvoeg voordat jy live gaan. Dit sal voorkom dat enigiemand jou geheime API-sleutel steel, en moontlik jou vertaalprojek opblaas deur nuwe, nie-verwante stringe by te voeg.

Maak seker dat jy die volledige voorbeeld hier op ons GitHub-profiel gaan nakyk. 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 kontak te maak, en ons sal meer as bly wees om te help.

TacoTranslate laat jou toe om jou React-toepassings vinnig en outomaties te lokaliseer na en van enige taal. Begin vandag nog!