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

Korleis det fungerer

Ettersom verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan imøtekomme brukarar frå ulike land og kulturar. Eit av dei viktigaste tiltaka for å oppnå dette er internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne rettleiinga skal 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.
Om du brukar App Router, sjå denne rettleiinga i staden.

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, skal vi fyrst velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. Men i dette eksempelet vil vi bruke TacoTranslate.

TacoTranslate omset automatisk strengane dine til kva for eit språk som helst ved hjelp av banebrytande AI, og frigjer deg frå det tidkrevjande arbeidet med å administrere JSON-filer.

Lat oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ei gratis TacoTranslate-konto

No som du har installert modulen, er det på tide å opprette TacoTranslate-kontoen din, eit omsetjingsprosjekt og dei tilhøyrande API-nøklane. Opprett ein konto her. Det er gratis, og krev ikkje at du legg inn eit kredittkort.

I brukargrensesnittet til TacoTranslate-applikasjonen, opprett eit prosjekt, og gå til fanen for API-nøklar. Opprett ei read‑nøkkel og ei 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. Til dømes kan du legge dei til i ei .env‑fil i rotmappa i prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Hugs å aldri lekkje den hemmelege read/write API-nøkkelen til produksjonsmiljø på klientsida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette dømet set 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 originar 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 nyttar API‑nøklane frå tidlegare. Til dømes opprett ei fil kalla /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, med ein 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>
	);
}

Viss du allereie har eigne pageProps og _app.tsx, ver så snill å utvide definisjonen med eigenskapane og koden ovanfor.

Steg 4: Implementering av server-side rendering

TacoTranslate støttar server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med det same, i staden for eit kort blaff med uomsett innhald fyrst. I tillegg kan vi unngå å gjere nettverkskall frå klienten, fordi vi allereie har alle omsetjingane vi treng.

Vi startar med å oppretta eller endra /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 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 å sørgje for at nye strengar blir sendt til omsetjing.

Hittil har vi berre sett opp Next.js-applikasjonen med ei liste over støtta språk. Neste steg er å hente omsetjingane for alle sidene dine. For å gjere det, vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps etter dine behov.

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 er oppdaterte.

For å bruke ein av desse funksjonane i ei side, lat 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 strengar 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! 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 tillatelsar på API-nøkkelen vil kunne opprette nye strengar som skal omsetjast. Vi anbefaler 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 kven som helst kven som helst frå å stele den hemmelege API-nøkkelen din, og potensielt auke omfanget av oversettingsprosjektet 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!