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

I takt med att världen blir mer globaliserad blir det allt viktigare för webbutvecklare 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), vilket gör att du kan anpassa din applikation till olika språk, valutor och datumformat.

I den här guiden går vi igenom hur du lägger till internationalisering i din React Next.js-applikation, med rendering på serversidan. 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, se istället den här guiden.

Steg 1: Installera ett i18n-bibliotek

För att implementera internationalisering i din Next.js-applikation börjar vi med att välja ett i18n-bibliotek. Det finns flera populära bibliotek, inklusive next-intl. Men i det här exemplet 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 det tråkiga arbetet med att hantera 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 modulen installerad ä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 anger ett kreditkort.

I TacoTranslate-applikationens användargränssnitt skapar du ett projekt och navigerar till fliken för API-nycklar. Skapa en read nyckel och en read/write nyckel. Vi kommer att spara dem som miljövariabler. read nyckeln är det vi kallar public och read/write nyckeln är secret. Du kan till exempel lägga till dem i en .env fil i projektets rotmapp.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standardlokalkod som används som fallback. I det här exemplet sätter vi den till en för engelska.
• TACOTRANSLATE_ORIGIN: Den "mapp" där dina strängar kommer att lagras, till exempel webbadressen (URL) till din webbplats. Läs mer om ursprung 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. Till exempel, skapa en fil som heter /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 enklare att använda den igen senare. Nu, genom att använda en anpassad /pages/_app.tsx, kommer vi att lägga till 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 redan har anpassade pageProps och _app.tsx, vänligen utöka definitionen med egenskaperna och koden ovan.

Steg 4: Implementera rendering på serversidan

TacoTranslate möjliggör rendering på serversidan av dina översättningar. Detta förbättrar användarupplevelsen avsevärt genom att visa översatt innehåll omedelbart, istället för att först visa en kort period med oöversatt innehåll. Dessutom kan vi undvika 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'),
	});
};

Anpassa isProduction kontrollen efter din miljö. Om true, kommer TacoTranslate att göra den publika API-nyckeln tillgänglig. Om vi är i en lokal, test- eller staging-miljö (isProduction is false) kommer vi att använda den hemliga read/write API-nyckeln för att säkerställa att nya strängar skickas för översättning.

Hittills har vi bara konfigurerat Next.js-applikationen med en lista över stödda 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 krav.

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 i en sida, låt oss anta att du har en fil för en sida 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 bör nu kunna använda Translate komponenten för att översätta strängar i 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 där API-nyckeln har read/write behörighet kommer att kunna skapa nya strängar som ska översättas. Vi rekommenderar att ha en sluten och säkrad 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 vem som helst vem som helst från att stjäla din hemliga API-nyckel och potentiellt göra ditt översättningsprojekt onödigt stort genom att lägga till nya, orelaterade strängar.

Se till att kolla in det fullständiga exemplet på vår GitHub-profil. Där hittar du även ett exempel på hur man gör detta med App Router! Om du stöter på problem, tveka inte att kontakta oss, så hjälper vi gärna till.

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