Den beste løysinga for internasjonalisering (i18n) i Next.js-applikasjonar

Slik fungerer det

Ettersom verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan møte brukarar frå ulike land og kulturar. Eit av dei viktigaste måtane å oppnå dette på er internasjonalisering (i18n), som gjer at du kan tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

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

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

Steg 1: Installer eit i18n-bibliotek

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

TacoTranslate oversettar automatisk tekstane dine til alle språk ved hjelp av banebrytande AI, og friar deg frå den møysame handsaminga av 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 ein TacoTranslate-konto, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje oppgi kredittkort.

I TacoTranslate-applikasjonen si 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. Den read nøkkelen er det vi kallar public, og den read/write nøkkelen er secret. Du kan til dømes legge dei i ei .env fil i rotmappa til prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Sørg for å aldri lekke den hemmelege read/write API-nøkkelen i klientside-produksjonsmiljø.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalekode. I dette dømet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «mappe» der tekstane dine blir lagra, som til dømes nettadressa 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 i applikasjonen din, må du opprette ein klient som brukar API-nøklane frå tidlegare. Til dømes kan du lage 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 ein eigen fil gjer det enklare å bruke den igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, skal vi leggje 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>
	);
}

Dersom du allereie har eigne pageProps og _app.tsx, ver venleg å utvide definisjonen med eigenskapane og koden som er vist ovanfor.

Steg 4: Implementering av server-side rendering

TacoTranslate gjer det mogleg å gjengi omsetjingane dine på serveren. Dette betrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for først å vise eit blaff av uomsett innhald. I tillegg kan vi sløyfe nettverksførespurnader på klienten, sidan 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 isProductionsjekken slik at den passar 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.

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

Desse funksjonane tek tre argument: eitt 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 anten den eine eller den andre funksjonen på ei side, la oss føresetje 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 tekststrengar i alle React-komponentane dine.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Rull ut og test!

Me er ferdige! Next.js-applikasjonen din vil no automatisk bli omsett 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 skal omsetjast. Me tilrår å ha 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 at nokon steler den hemmelege API-nøkkelen din, og potensielt blåse opp omsetjingsprosjektet ditt ved å leggje til nye, ikkje-relaterte strengar.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!