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

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for webutviklarar å byggje applikasjonar som kan imøtekoma brukarar frå ulike land og kulturar. Ein av dei viktigaste måtane å få dette til på er internasjonalisering (i18n), som gjer det mogleg å tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne rettleiinga skal vi sjå korleis du legg til internasjonalisering i React Next.js-applikasjonen din, med server-side rendering. TL;DR: Sjå heile eksemplet her.

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

Steg 1: Installer eit i18n-bibliotek

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

TacoTranslate omset automatisk strengane dine til alle språk ved hjelp av moderne AI, og frigjer deg frå den møysomelege handteringa av JSON-filer.

La oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

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

I brukargrensesnittet til TacoTranslate-applikasjonen opprett eit prosjekt og gå til fanen for API-nøklar. Opprett ein read nøkkel og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. Den read nøkkelen er det vi kallar public, og den read/write nøkkelen er secret. Til dømes kan du leggje dei til i ei .env fil i rotmappa i 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øer.

Vi legg òg til to miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard reserve-lokalkode. I dette dømet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «mappe» der strengane dine blir lagra, til dømes URL-en til nettsida di. Les meir om origins her.

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

Steg 3: Sette opp TacoTranslate

For å integrere TacoTranslate i applikasjonen din, må du opprette ein klient som bruker API-nøklane frå tidlegare. Til dømes kan du opprette ei fil med namnet /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.

Å opprette klienten i ei eiga fil gjer det enklare å bruke på nytt seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, legg vi til TacoTranslate provideren.

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

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

Steg 4: Implementering av server-side rendering

TacoTranslate gir støtte for server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for eit kort glimt av uomsett innhald først. I tillegg kan vi hoppe over nettverksforespørslar 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'),
	});
};

Tilpass isProduction‑sjekken til oppsettet ditt. Dersom true, vil TacoTranslate synleggjere den offentlege API‑nøkkelen. Dersom vi er i eit lokalt, test- eller staging‑miljø (isProduction is false), vil vi bruke den hemmelege read/write API‑nøkkelen for å sikre at nye strengar blir sendt til omsetjing.

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 omsetjingane for alle sidene dine. For å gjere det, bruker du anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps etter kva du treng.

Desse funksjonane tek tre argument: Eit Next.js Static Props Context objekt, konfigurasjon for TacoTranslate, og valfrie Next.js-eigenskapar. Merk at revalidate på getTacoTranslateStaticProps er sett til 60 som standard, slik at omsetjingane dine held seg oppdaterte.

For å bruke ein av funksjonane i ei side, la 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 til å omsetje tekststrengar i alle React-komponentane dine.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Distribuer og test!

Me er ferdige! React-applikasjonen din vil no bli omsett automatisk når du legg til strengar i ein Translate komponent. Merk at berre miljø med read/write rettar på API-nøkkelen vil kunne opprette nye strengar som skal omsetjast. Me anbefaler at du har eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og leggje til nye strengar før du går i produksjon. Dette vil hindre at nokon nokon får tak i den hemmelege API-nøkkelen din, og potensielt blåse opp omsetjingsprosjektet ditt ved å leggje til nye, ikkje-relaterte strengar.

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

TacoTranslate lar deg automatisk lokalisere React-applikasjonane dine raskt til og frå over 75 språk. Kom i gang i dag!