Hur man implementerar internationalisering i en Next.js-applikation som använder Pages Router

I takt med att världen blir allt mer globaliserad blir det allt viktigare för webb­utvecklare att skapa applikationer som kan tillgodose användare från olika länder och kulturer. Ett av de viktigaste sätten att uppnå detta är genom internationalisering (i18n), som gör det möjligt att anpassa din applikation till olika språk, valutor och datumformat.

I denna handledning kommer vi att utforska hur du lägger till internationalisering i din React Next.js-applikation, med server­sides­rendering. TL;DR: Se hela exemplet här.

Denna guide är för Next.js-applikationer som använder Pages Router.
Om du använder App Router, vänligen se denna guide istället.

Steg 1: Installera ett i18n-bibliotek

För att implementera internationalisering i din Next.js-applikation kommer vi först att välja ett i18n-bibliotek. Det finns flera populära bibliotek, inklusive next-intl. Men i detta exempel kommer vi att använda TacoTranslate.

TacoTranslate översätter automatiskt dina strängar till vilket språk som helst med hjälp av banbrytande AI, och befriar dig från den tidskrävande hanteringen av JSON-filer.

Låt oss installera det med npm i din terminal:

npm install tacotranslate

Steg 2: Skapa ett gratis TacoTranslate-konto

Nu när du har installerat modulen är det dags att skapa ditt TacoTranslate-konto, ett översättningsprojekt och tillhörande API-nycklar. Skapa ett konto här. Det är gratis och kräver inte att du lägger till ett kreditkort.

Inom TacoTranslate-applikationens användargränssnitt, skapa ett projekt och navigera till dess flik för API-nycklar. Skapa en read nyckel och en read/write nyckel. Vi kommer att spara dem som miljövariabler. read nyckeln är vad vi kallar public och read/write nyckeln är secret. Till exempel kan du lägga till dem i en .env fil i roten av ditt projekt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Se till att aldrig läcka den hemliga read/write API-nyckeln till klient-sidans produktionsmiljöer.

Vi kommer också att lägga till två miljövariabler till: TACOTRANSLATE_DEFAULT_LOCALE och TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkod. I det här exemplet sätter vi den till en för engelska.
• TACOTRANSLATE_ORIGIN: ”Mappen” där dina strängar kommer att lagras, som till exempel URL:en för din webbplats. Läs mer om origins här.

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

Steg 3: Konfigurera TacoTranslate

För att integrera TacoTranslate med din applikation behöver du skapa en klient med API-nycklarna från tidigare. Skapa till exempel en 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 kommer snart automatiskt att definiera TACOTRANSLATE_API_KEY.

Att skapa klienten i en separat fil gör det lättare att använda den igen senare. Nu, med hjälp av en anpassad /pages/_app.tsx, kommer vi att lägga till TacoTranslate leverantören.

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 redan har anpassade pageProps och _app.tsx, vänligen utöka definitionen med egenskaperna och koden från ovan.

Steg 4: Implementera server-side rendering

TacoTranslate möjliggör server-side rendering av dina översättningar. Detta förbättrar användarupplevelsen avsevärt genom att visa översatt innehåll omedelbart, istället för en blixt av oöversatt innehåll först. Dessutom kan vi hoppa över nätverksförfrågningar på klienten, eftersom vi redan har alla översättningar vi behöver.

Vi börjar med att skapa eller ändra /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'),
	});
};

Ändra isProduction kontrollen så att den passar din inställning. Om truekommer TacoTranslate att visa den offentliga API-nyckeln. Om vi befinner oss i en lokal, test- eller mellanlagringsmiljö (isProduction is false) använder vi den hemliga API-nyckeln för read/write för att se till att nya strängar skickas för översättning.

Hittills har vi bara ställt in Next.js-applikationen med en lista över stödjade språk. Nästa steg är att hämta översättningar för alla dina sidor. För att göra det använder du antingen getTacoTranslateStaticProps eller getTacoTranslateServerSideProps beroende på dina behov.

Dessa funktioner tar tre argument: Ett Next.js Static Props Context objekt, konfiguration för TacoTranslate, och valfria Next.js-egenskaper. Observera att revalidate på getTacoTranslateStaticProps är satt till 60 som standard, så att dina översättningar hålls uppdaterade.

För att använda någon av funktionerna på en sida, låt oss anta att du har en sidfil 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 ska nu kunna använda Translate komponenten för att översätta strängar inom alla dina React-komponenter.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Distribuera och testa!

Vi är klara! Din React-applikation kommer nu att översättas automatiskt när du lägger till strängar i en Translate komponent. Observera att endast miljöer med read/write behörigheter på API-nyckeln kan skapa nya strängar att översätta. Vi rekommenderar att ha en stängd och säker staging-miljö där du kan testa din produktionsapplikation med en sådan API-nyckel, och lägga till nya strängar innan du går live. Detta förhindrar att någon stjäl din hemliga API-nyckel och potentiellt fyller din översättningsprojekt med nya, orelaterade strängar.

Se till att kolla in det fullständiga exemplet på vår GitHub-profil. Där hittar du också ett exempel på hur du gör detta med App Router! Om du stöter på några problem, tveka inte att höra av dig, så hjälper vi dig mer än gärna.

TacoTranslate låter dig automatiskt lokalisera dina React-applikationer snabbt till och från vilket språk som helst. Kom igång idag!