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

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan møta brukarar frå ulike land og kulturar. Eit av dei viktigaste tiltaka for å oppnå dette er internasjonalisering (i18n), som gjer at du kan tilpasse applikasjonen din til ulike språk, valutaer 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 eksemplet her.

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

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, skal vi fyrst velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette dømet vil vi bruke TacoTranslate.

TacoTranslate omset automatisk tekstane dine til alle språk ved hjelp av banebrytande kunstig intelligens, og frigjer deg frå det tidkrevjande arbeidet med å handsame JSON-filer.

Lat 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 å oppretta TacoTranslate-kontoen din, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og det krev ikkje at du legg inn 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. For eksempel 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å at du aldri lekkar den hemmelege read/write API-nøkkelen i produksjonsmiljø på klientsida.

Vi legg også til to ekstra miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette dømet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Mappa der strengane dine blir lagra, som 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: Setje 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 snart.

Å opprette klienten i ei eiga fil gjer det lettare å bruke den igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, vil vi leggje til TacoTranslate provider.

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, utvid definisjonen med eigenskapane og koden ovanfor.

Steg 4: Implementering av serverside-rendering

TacoTranslate støttar server-side-rendering av omsetjingane dine. Dette betrar brukaropplevinga mykje ved at omsett innhald blir vist med ein gong, i staden for at brukaren fyrst ser eit åugneblikk med uomsett innhald. I tillegg kan vi sløyfe nettverkskall på klienten, fordi vi allereie har alle omsetjingane vi treng.

Vi byrjar 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 vise 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 strengar blir sendt til omsetjing.

Fram til no har vi berre konfigurert Next.js-applikasjonen med ei liste over språk som er støtta. Neste steg er å hente omsetjingar for alle sidene dine. For å gjere det, skal du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps avhengig av behova dine.

Desse funksjonane tek tre argument: Eit Next.js Static Props Context‑objekt, konfigurasjon for TacoTranslate, og valfrie eigenskapar for Next.js. 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 seie 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!

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

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!