Den beste løsningen for internasjonalisering (i18n) i Next.js-apper

Hvordan det fungerer

Etter hvert som verden blir mer globalisert, blir det stadig viktigere for nettutviklere å bygge applikasjoner som kan imøtekomme brukere fra ulike land og kulturer. En av de viktigste måtene å oppnå dette på er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til forskjellige språk, valutaer og datoformater.

I denne veiledningen skal vi utforske hvordan du legger til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Se hele eksempelet her.

Denne veiledningen er for Next.js-applikasjoner som bruker Pages Router.
Hvis du bruker App Router, se denne veiledningen i stedet.

Trinn 1: Installer et i18n-bibliotek

For å implementere internasjonalisering i din Next.js-applikasjon, vil vi først velge et i18n-bibliotek. Det finnes flere populære biblioteker, inkludert next-intl. Men i dette eksempelet vil vi bruke TacoTranslate.

TacoTranslate oversetter automatisk strengene dine til hvilket som helst språk ved hjelp av avansert AI, og frigjør deg fra det tidkrevende arbeidet med å administrere JSON-filer.

La oss installere det ved å bruke npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett en gratis TacoTranslate-konto

Nå som du har installert modulen, er det på tide å opprette din TacoTranslate-konto, et oversettelsesprosjekt og tilhørende API-nøkler. Opprett en konto her. Det er gratis, og krever ikke at du legger inn kredittkort.

Innenfor TacoTranslate-applikasjonens brukergrensesnitt, opprett et prosjekt, og naviger til fanen for API-nøkler. Opprett en read nøkkel, og en read/write nøkkel. Vi vil lagre dem som miljøvariabler. read nøkkelen er det vi kaller public og read/write nøkkelen er secret. For eksempel kan du legge dem til i en .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på å aldri lekke den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljøer.

Vi legger også til to miljøvariabler til: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksemplet setter vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: “Mappen” der strengene dine vil bli lagret, som for eksempel nettadressen til nettstedet ditt. Les mer om origins her.

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

Trinn 3: Sette opp TacoTranslate

For å integrere TacoTranslate med applikasjonen din, må du opprette en klient ved å bruke API-nøklene fra tidligere. For eksempel kan du opprette en fil med navnet /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 snart automatisk definere TACOTRANSLATE_API_KEY.

Å opprette klienten i en egen fil gjør det enklere å bruke den igjen senere. Nå, ved å bruke en tilpasset /pages/_app.tsx, legger vi til TacoTranslate provideren.

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>
	);
}

Hvis du allerede har tilpassede pageProps og _app.tsx, vennligst utvid definisjonen med egenskapene og koden fra ovenfor.

Trinn 4: Implementere server-side rendering

TacoTranslate tillater server-side rendering av oversettelsene dine. Dette forbedrer brukeropplevelsen betydelig ved å vise oversatt innhold umiddelbart, i stedet for først å vise et øyeblikk med ikke-oversatt innhold. I tillegg kan vi hoppe over nettverksforespørsler på klienten, fordi vi allerede har alle oversettelsene vi trenger.

Vi begynner 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'),
	});
};

Endre isProduction -kontrollen slik at den passer til oppsettet ditt. Hvis true, vil TacoTranslate vise den offentlige API-nøkkelen. Hvis vi er i et lokalt, test- eller iscenesettelsesmiljø (isProduction is false), bruker vi den hemmelige read/write API-nøkkelen for å sikre at nye strenger sendes til oversettelse.

Frem til nå har vi bare satt opp Next.js-applikasjonen med en liste over støttede språk. Neste steg er å hente oversettelser for alle sidene dine. For å gjøre det, vil du bruke enten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på dine behov.

Disse funksjonene tar tre argumenter: Ett Next.js Static Props Context objekt, konfigurasjon for TacoTranslate, og valgfrie Next.js-egenskaper. Merk at revalidate på getTacoTranslateStaticProps som standard er satt til 60, slik at oversettelsene dine holdes oppdatert.

For å bruke en av funksjonene i en side, la oss anta at du har en 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 nå kunne bruke Translate komponenten for å oversette strenger i alle dine React-komponenter.

import {Translate} from 'tacotranslate/react';

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

Trinn 5: Distribuer og test!

Vi er ferdige! Din Next.js-applikasjon vil nå bli automatisk oversatt når du legger til noen strenger i en Translate komponent. Merk at kun miljøer med read/write tillatelser på API-nøkkelen vil kunne opprette nye strenger for oversettelse. Vi anbefaler å ha et lukket og sikkert staging-miljø hvor du kan teste produksjonsapplikasjonen din med en slik API-nøkkel, og legge til nye strenger før du går live. Dette vil forhindre at noen stjeler din hemmelige API-nøkkel, og potensielt gjør oversettelsesprosjektet ditt større ved å legge til nye, urelaterte strenger.

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!