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

Slik fungerer det

Etter kvart som verda blir meir globalisert, blir det meir og meir viktig for nettutviklarar å lage applikasjonar som kan møte behova til brukarar frå ulike land og kulturar. Eit av hovudmidla for å oppnå dette er internasjonalisering (i18n), som gjer at du kan tilpasse applikasjonen din til ulike språk, valutaar og datoformat.

I denne rettleiinga skal vi sjå på korleis du legg til internasjonalisering i React Next.js-applikasjonen din, med rendering på serversida. TL;DR: Sjå heile eksemplet her.

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

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 eksempelet vil vi derimot bruke TacoTranslate.

TacoTranslate oversetter automatisk strengane dine til kva som helst språk ved hjelp av avansert AI, og frigjer deg frå det tidkrevjande arbeidet med å administrere JSON-filar.

Lat oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

Når du no har installert modulen, er det på tide å opprette TacoTranslate-kontoen din, eit omsetjingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje oppgi eit kredittkort.

I TacoTranslate-applikasjonen sitt brukargrensesnitt (UI), 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. read‑nøkkelen kallar vi public, og read/write‑nøkkelen er secret. Til dømes kan du leggje dei til i ei .env‑fil i rotmappa til prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på at du aldri lekkjer den hemmelege read/write API-nøkkelen i klientside-produksjonsmiljø.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard reservelokalkode. I dette eksemplet setjer vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Mappa der strengane dine blir lagra, til dømes URL-en til nettsida di. Les meir om opprinnelsar her.

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

Steg 3: Setje 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 ei eiga fil gjer det enklare å bruke den igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, vil vi leggje til TacoTranslate tilbydar.

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

Steg 4: Implementering av rendering på serversida

TacoTranslate støttar server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for at det først kjem eit blaff 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'),
	});
};

Tilpass isProduction‑sjekken til 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 hemmelige read/write API-nøkkelen for å sikre at nye tekststrengar blir sendt til omsetjing.

Hittil 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, kan du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps ut frå krava 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 anten av desse funksjonane på ein side, la oss anta at du har ein 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 strengar 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 bli automatisk omsett når du legg til strengar i ein Translate komponent. Merk at berre miljø med read/write tillatelser på API-nøkkelen vil kunne opprette nye strengar 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 strengar før du går i produksjon. Dette vil hindre at nokon nokon steler den hemmelege API-nøkkelen din, og potensielt gjere omsetjingsprosjektet ditt større 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!