Korleis implementere internasjonalisering i ei Next.js-applikasjon som bruker Pages Router

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å lage applikasjonar som kan møte brukarar frå ulike land og kulturar. Eit av dei viktigaste tiltaka for å oppnå dette er internasjonalisering (i18n), som let deg tilpasse applikasjonen din til ulike språk, valuta og datoformat.

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

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

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, vel me fyrst eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette eksempelet vil me likevel bruke TacoTranslate.

TacoTranslate oversettar strengane dine automatisk til alle språk ved hjelp av banebrytande AI, og frigjer deg frå det tidkrevjande arbeidet med å administrere JSON-filer.

Lat oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

Når 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 TacoTranslate-applikasjonen sitt brukargrensesnitt, opprett eit prosjekt, og gå til fana for API-nøklar. Opprett ein read nøkkel og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. read nøkkelen er det vi kallast public og read/write nøkkelen er secret. Til dømes kan du leggje dei til i ei .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på at du aldri røper den hemmelege read/write API-nøkkelen i produksjonsmiljø på klientsida.

Vi vil òg leggje til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempelet brukar vi en for engelsk.
• TACOTRANSLATE_ORIGIN: “mappa” der tekstane dine blir lagra, til dømes 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

For å integrere TacoTranslate med applikasjonen din, må du opprette ein klient som bruker API-nøklane frå tidlegare. Til dømes opprett 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 om kort tid.

Å oppretta klienten i ei eiga fil gjer det lettare å bruke den igjen seinare. No, ved å bruke ei tilpassa /pages/_app.tsx, legg vi til TacoTranslate tilbydar.

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

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

Steg 4: Implementering av serverside-rendering

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

Tilpass isProduction‑sjekken til oppsettet ditt. Hvis true, vil TacoTranslate synleggjere den offentlege API-nøkkelen. Hvis 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 tekststrenger blir sendt til omsetjing.

Hittil har vi berre sett opp Next.js-applikasjonen med ei liste over språk som er støtta. Det neste vi skal gjere, er å hente omsetjingar for alle sidene dine. For å gjere det, bruker du anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps avhengig av krava dine.

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 på 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 for å omsetje strengar 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 tillatelsar på API-nøkkelen vil kunne opprette nye strengar som skal omsetjast. Vi anbefaler at du har eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ei 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å det fullstendige eksempelet på GitHub-profilen vår. Der vil du også finne eit døme på korleis du kan gjere dette ved å bruke App Router! Om du støt på problem, ta gjerne kontakt, så hjelper vi deg meir enn gjerne.

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