Korleis implementere internasjonalisering i ein Next.js-applikasjon som brukar Pages Router

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av hovudmetodane for å oppnå dette er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen til ulike språk, valutaer og datoformat.

I denne guide vil vi utforske korleis du kan legge til internasjonalisering i di React Next.js-applikasjon, med server-side rendering. TL;DR: Sjå det fullstendige eksemplet her.

Denne veiledninga er for Next.js-applikasjonar som brukar Pages Router.
Om du brukar App Router, sjå heller denne guida.

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i din Next.js-applikasjon, vil vi først velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette eksempelet vil vi likevel bruke TacoTranslate.

TacoTranslate omset automatisk strengene dine til alle språk ved hjelp av avansert AI, og frigjer deg frå det tidkrevjande arbeidet med å handtere JSON-filer.

La oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

No som du har installert modulen, er det på tide å opprette din TacoTranslate-konto, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje å leggje til kredittkort.

I TacoTranslate-applikasjonen sin brukergrensesnitt, lag eit prosjekt, og naviger til fanen for API-nøklar. Lag ein read nøkkel, og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. read nøkkelen er det vi kallar public og read/write nøkkelen er secret. Til dømes kan du legge dei til i ei .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljø.

Vi vil også legge til to miljøvariablar til: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard tilbakefallslokalkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappa» der strengane dine vil bli lagra, slik som URL-en til nettsida di. Les meir om originar her.

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

Steg 3: Sette opp 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;

Vi vil automatisk definere TACOTRANSLATE_API_KEY snart.

Å lage klienten i ei separat fil gjer det lettare å bruke den på nytt sidan. No, ved å bruke ein eige /pages/_app.tsx, vil vi legge til TacoTranslate provider-en.

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>
	);
}

Hvis du allereie har tilpassa pageProps og _app.tsx, ver venleg å utvide definisjonen med eigenskapane og koden frå ovanfor.

Steg 4: Implementering av server-side rendering

TacoTranslate legg til rette for server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga betydeleg ved å vise omsette innhald med ein gong, i staden for først å vise eit glimt av uomsett innhald. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har alle omsetjingane vi treng.

Vi startar med å opprette eller endre /next.config.js.

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'),
	});
};

Endre isProduction -kontrollen slik at den passer til oppsettet ditt. Hvis true, vil TacoTranslate vise den offentlige API-nøkkelen. Hvis vi er i et lokalt, test- eller iscenesettelsesmiljø (isProduction is false), bruker vi den hemmelige read/write API-nøkkelen for å sikre at nye strenger sendes til oversettelse.

Til no har vi berre sett opp Next.js-applikasjonen med ei liste over støtta språk. Det neste vi skal gjere er å hente omsetjingar for alle sidene dine. For å gjere det brukar du anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på krava dine.

Disse funksjonane tar tre argument: Eitt Next.js Static Props Context objekt, konfigurasjon for TacoTranslate og valfrie Next.js eigenskapar. Ver merksam på at revalidate på getTacoTranslateStaticProps er sett til 60 som standard, slik at omsetjingane dine held seg oppdaterte.

For å bruke begge funksjonane på ei side, lat oss anta at du har ei sidefil som /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!"/>;
}

Du skal no kunne bruke Translate komponenten for å omsetje strengjer i alle dine React-komponentar.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Steg 5: Distribuer og test!

Vi er ferdige! Din React-applikasjon vil no bli automatisk omsett når du legg til nokre strengjer i ein Translate komponent. Merk at berre miljø med read/write tillatelser på API-nøkkelen vil kunne opprette nye strengjer som skal omsetjast. Vi tilrår å ha eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og legge til nye strengjer før du går live. Dette vil hindre at nokon steler den hemmelige API-nøkkelen din, og potensielt auka prosjektet ditt med nye, ikkje-relaterte strengjer.

Hugs å sjå det komplette eksempelet på profilen vår på GitHub. Der finn du òg eit døme på korleis du kan gjere dette med App Router! Om du møter på problem, ta gjerne kontakt, så hjelper vi deg gjerne.

TacoTranslate let deg automatisk lokaliserer React-applikasjonane dine raskt til og frå alle språk. Kom i gang i dag!