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

Ettersom verda blir meir globalisert, blir det meir og meir viktig for nettsideutviklarar å lage applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av nøkkelmetodane for å oppnå dette er internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til forskjellige språk, valutaer og datoformat.

I denne veiledninga skal vi utforske korleis du kan legge til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Sjå det fullstendige eksempelet 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 å implementere internasjonalisering i din 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 tekstane dine til kva som helst språk ved hjelp av topp moderne AI, og frir deg frå den møysommelige handtering av JSON-filer.

La oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

No som du har fått modulen installert, er det på tide å opprette din TacoTranslate-konto, eit omsetjingsprosjekt, og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje å legge til eit kredittkort.

Innenfor TacoTranslate-applikasjonen sin brukargrensesnitt, lag eit prosjekt og naviger til fanen for API-nøklar. Lag ein read nøkkel, og ein read/write nøkkel. Vi skal lagre 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 til i ein .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver sikkert på å aldri lekke den hemmelige read/write API-nøkkelen til produksjonsmiljø på klientsida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard reserve-lokalkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappa» der strengane dine blir lagra, som til dømes URL-en til nettstaden din. Les meir om origins her.

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

Steg 3: Sette opp TacoTranslate

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

Å lage klienten i ei eiga fil gjer det lettare å bruke han igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, legg vi 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 tilpassa pageProps og _app.tsx, ver venleg å utvid definisjonen med eigenskapane og koden frå ovanfor.

Trinn 4: Implementering av server-side rendering

TacoTranslate legg til rette for server-side rendering av omsettingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for ein blink av uomsett innhald fyrst. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har alle omsettingane vi treng.

Vi startar med å lage 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 -kontrollen slik at den passar for oppsettet ditt. Dersom true, vil TacoTranslate gjere den offentlege API-nøkkelen tilgjengeleg. 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 strengjer blir sendt til omsetjing.

Hittil har vi berre sett opp Next.js-applikasjonen med ei liste over språk som er støtta. Neste steg er å hente omsetjingane for alle sidene dine. For å gjere det vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps ut frå 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 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 til å oversette tekststrenger i alle dine React-komponentar.

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 nye strengjer i ein Translate komponent. Merk at berre miljø med read/write tillatingar på API-nøkkelen vil kunne opprette nye strengjer 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 legge til nye strengjer før du går live. Dette vil hindre at nokon kan stela din hemmelege API-nøkkel, og potensielt blåsa opp omsetjingsprosjektet ditt ved å legge til nye, irrelevante strengjer.

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!