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

När världen blir alltmer globaliserad blir det allt viktigare för webbutvecklare att bygga 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 låter dig anpassa din applikation till olika språk, valutor och datumformat.

I den här artikeln kommer vi att gå igenom hur du lägger till internationalisering i din React Next.js-applikation med serversidig rendering. TL;DR: Se hela exemplet här.

Denna guide är för Next.js-applikationer som använder App Router.
Om du använder Pages Router, se den här guiden 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. I det här exemplet kommer vi däremot 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 tidsödande 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 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 anger ett kreditkort.

I TacoTranslate-applikationens användargränssnitt skapar du ett projekt och går till fliken API-nycklar. Skapa en read nyckel och en read/write nyckel. Vi sparar 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 rotkatalog.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Vi kommer också att lägga till två ytterligare miljövariabler: 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: Den "mapp" där dina strängar kommer att lagras, till exempel URL:en för 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 som använder 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Vi kommer automatiskt att definiera TACOTRANSLATE_API_KEY och TACOTRANSLATE_PROJECT_LOCALE inom kort.

Att skapa klienten i en separat fil gör det enkelt att använda den igen senare. getLocales är bara en hjälpfunktion med viss inbyggd felhantering. Skapa nu en fil som heter /app/[locale]/tacotranslate.tsx, där vi kommer att implementera TacoTranslate‑providern.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Observera 'use client'; som indikerar att detta är en klientkomponent.

Med contextprovidern nu redo att användas, skapa en fil med namnet /app/[locale]/layout.tsx, som är rotlayouten i vår applikation. Observera att denna sökväg innehåller en mapp som använder Dynamic Routes, där [locale] är den dynamiska parametern.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Det första att notera här är att vi använder vår parameter Dynamic Route [locale] för att hämta översättningar för det aktuella språket. Dessutom ser generateStaticParams till att alla språkkoder du har aktiverat för ditt projekt pre-renderas.

Nu ska vi bygga vår första sida! Skapa en fil med namnet /app/[locale]/page.tsx.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Observera variabeln revalidate som säger åt Next.js att bygga om sidan efter 60 sekunder och hålla dina översättningar uppdaterade.

Steg 4: Implementera rendering på serversidan

TacoTranslate stöder server-side rendering. 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 stund av oöversatt innehåll. Dessutom kan vi hoppa över nätverksförfrågningar på klienten, eftersom vi redan har de översättningar vi behöver för den sida användaren tittar på.

För att konfigurera serversidig rendering, skapa eller ändra /next.config.js:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Anpassa isProduction‑kontrollen så att den passar din miljö. Om true, kommer TacoTranslate att visa den publika API-nyckeln. Om vi är i en lokal, test- eller stagingmiljö (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.

För att säkerställa att routning och omdirigering fungerar som förväntat behöver vi skapa en fil som heter /middleware.ts. Genom att använda Middleware, kan vi omdirigera användare till sidor som visas på deras föredragna språk.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Se till att konfigurera matcher i enlighet med Next.js Middleware-dokumentationen.

I klienten kan du ändra locale cookie för att ändra vilket språk användaren föredrar. Se den fullständiga exempelkoden för idéer om hur du gör detta!

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örighet på API-nyckeln kommer att kunna skapa nya strängar som ska översättas. Vi rekommenderar att ha en stängd och säker stagingmiljö 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 kommer att förhindra att någon någon stjäl din hemliga API-nyckel, och potentiellt göra ditt översättningsprojekt onödigt stort genom att lägga till nya, orelaterade strängar.

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 Pages 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!