Korleis implementere internasjonalisering i ein Next.js-applikasjon som bruker 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 dei viktigaste måtane å oppnå dette på, er gjennom internasjonalisering (i18n), som gjer at du kan tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne guida skal vi utforske korleis ein kan leggje til internasjonalisering i React Next.js-applikasjonen din, med server-side rendering. TL;DR: Sjå fullt døme her.

Denne guida 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 di Next.js-applikasjon, vil vi først velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. Men i dette eksempelet skal vi bruke TacoTranslate.

TacoTranslate omset automatisk strengene dine til kva som helst språk ved hjelp av avansert AI, og frigjer deg frå den tungvinte handteringa av JSON-filer.

La oss installere det ved å bruke npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

No når 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 krev ikkje at du legg til eit kredittkort.

Innenfor TacoTranslate-applikasjonen sin UI, opprett eit prosjekt, og naviger til API-nøkkel-fanen. 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 leggje dei til i ein .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver sikker 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 reserveinnstilling for lokalekode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: "Mappa" der strengane dine vert lagra, 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

For å integrere TacoTranslate med applikasjonen din, må du lage ein klient med API-nøklane frå tidlegare. Til dømes, lag ein 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.

Å lage klienten i ein eigen fil gjer det enklare å bruke han på nytt seinare. No, ved å bruke ei 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>
	);
}

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

Steg 4: Implementering av serverside rendering

TacoTranslate legg til rette for server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga betrakteleg ved å vise omsett innhald med ein gong, i staden for først å vise ein blink av uomsett innhald. I tillegg kan vi hoppe over nettverksførespurnader 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. Dersom true, vil TacoTranslate gje tilgang til den offentlege API-nøkkelen. Dersom vi er i eit lokalt, test- eller staging-miljø (isProduction is false), brukar vi den hemmelege read/write API-nøkkelen for å sikre at nye strengjer blir sende til omsetjing.

Fram 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 omsettingar for alle sidene dine. For å gjere det, vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på behova dine.

Desse funksjonane tek tre argument: Éin 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 kvar 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 strengjer 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 automatisk omsett når du legg til ein streng i ein Translate komponent. Merk at berre miljø med read/write rettar på API-nøkkelen vil kunne opprette nye strenger for omsetjing. Vi anbefaler å ha eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og legge til nye strenger før du går live. Dette vil hindre at nokon stjeler den hemmelege API-nøkkelen din, og potensielt belastar omsetjingsprosjektet ditt med nye, ikkje-relaterte strengar.

Hugs å sjekke ut det fullstendige eksemplet på profilen vår på GitHub. Der vil du også finne eit eksempel på korleis du kan gjere dette ved bruk av App Router! Om du støyttar på problem, ikkje nøl med å ta kontakt, så hjelper vi deg gjerne.

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