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 å byggje applikasjonar som kan imøtekomme brukarar frå ulike land og kulturar. One of the key ways to achieve this is through internationalization (i18n), which allows you to adapt your application to different languages, currencies, and date formats.

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

Denne guida er for Next.js-applikasjonar som bruker Pages Router.
Om du bruker App Router, vennligst sjå denne guida i staden.

Steg 1: Installer eit i18n-bibliotek

For å setje opp internasjonalisering i Next.js-applikasjonen din, vel vi først eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette dømet brukar vi derimot TacoTranslate.

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

Lat oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ei gratis TacoTranslate-konto

Når du no har installert modulen, er det på tide å opprette ein TacoTranslate-konto, eit omsetjingsprosjekt og tilknytte 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øklane. Opprett 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 i ei .env fil i rotmappa av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på å aldri lekkje den hemmelege read/write API-nøkkelen i produksjonsmiljøet på klientsida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard kode for fallback-locale. 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 ved å bruke API-nøklane frå tidlegare. For eksempel, opprett ei fil som heiter /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 litt.

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

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

Om du allereie har eigne pageProps og _app.tsx, ver venleg og utvid definisjonen med eigenskapane og koden som står ovanfor.

Steg 4: Implementering av serverside-rendering

TacoTranslate gjer det mogleg å rendere omsetjingane dine på serveren. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for at brukarane fyrst ser eit kort glimt av uomsett innhald. I tillegg kan vi sløyfe nettverkskall 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 sjekken slik at den passar for oppsettet ditt. Hvis true, vil TacoTranslate gjere den offentlege API-nøkkelen synleg. 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 for omsetjing.

Til no har vi berre konfigurert Next.js-applikasjonen med ei liste over støtta språk. Neste steg er å hente omsetjingar for alle sidene dine. For å gjere det, brukar du 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 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 for å oversette strengar i alle React-komponentane dine.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Rull ut og test!

No er vi ferdige! React-applikasjonen din vil no omsetjast 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 kan omsetjast. Vi tilrår 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 live. Dette vil hindre nokon nokon i å stela den hemmelege API-nøkkelen din, og potensielt auke omfanget av omsetjingsprosjektet ditt ved å leggje til nye, ikkje-relaterte strengar.

Hugs å sjå det komplette eksempelet på GitHub-profila vår. Der finn du òg eit døme på korleis du gjer dette med App Router! Om du opplever problem, ta gjerne 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!