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

Korleis det fungerer

Etter kvart som verda blir meir globalisert, blir det stadig viktigare for webutviklarar å lage applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av hovudmåtene å få til dette på, er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne opplæringa skal vi utforske korleis du kan legge til internasjonalisering i React Next.js-applikasjonen din, med server side rendering. TL;DR: Sjå det komplette dømet her.

Denne guida er for Next.js-applikasjonar som bruker Pages Router.
Dersom du bruker App Router, vennligst sjå denne guida i staden.

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i din Next.js-applikasjon, vil vi først velje eit i18n-bibliotek. Det finst fleire populære bibliotek, inkludert next-intl. I dette eksempelet skal vi likevel bruke TacoTranslate.

TacoTranslate omset automatisk strengene dine til kva som helst språk ved hjelp av toppmoderne AI, og sparar deg for det tidkrevjande arbeidet med å handtere JSON-filer.

La oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ein gratis TacoTranslate-konto

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

I TacoTranslate-applikasjonens brukargrensesnitt, opprett eit prosjekt, og naviger til fanen for API-nøklar. Opprett éin read nøkkel, og éin read/write nøkkel. Vi vil lagre dei som miljøvariablar. read nøkkelen er det vi kallar public, og read/write nøkkelen er secret. Til dømes kan du legge dei til i ei .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard tilbakeslagslokalkode. I dette dømet set vi han til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappa» der strengane dine blir lagra, som til dømes URL-en til nettsida di. Les meir om origin her.

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

Steg 3: Sette opp TacoTranslate

For å integrere TacoTranslate med applikasjonen din, må du lage ein klient ved å bruke API-nøklane frå tidlegare. Til dømes, lag ei 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 vil snart automatisk definere TACOTRANSLATE_API_KEY.

Å opprette klienten i ei eiga fil gjer det lettare å bruke han igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, skal vi legge 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>
	);
}

Om du allereie har tilpassa pageProps og _app.tsx, ver venleg å utvid definisjonen med eigenskapane og koden frå ovanfor.

Steg 4: Implementering av server-side rendering

TacoTranslate tillèt server-side rendering av omsettingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med ein gong, i staden for eit augeblikk med uomsett innhald først. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har alle omsettingane vi treng.

Vi startar med å lage 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 -sjekken slik at den passar ditt oppsett. Om true, vil TacoTranslate gjere den offentlege API-nøkkelen synleg. Om 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 tekststrengar blir sende for omsetjing.

Fram til no har vi berre sett opp Next.js-applikasjonen med ei liste over støtta språk. Det neste vi skal gjere, er å hente omsettingar for alle sidene dine. For å gjere det, vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på 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 som standard er sett til 60, slik at omsetjingane dine held seg oppdaterte.

For å bruke ei av funksjonane i ei side, let oss seie 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 for å omsetje tekststrengar i alle React-komponentane dine.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Deploy og test!

Vi er ferdige! Din Next.js-applikasjon vil no verte automatisk omsett når du legg til strengjer i ein Translate komponent. Merk at berre miljø med read/write tilgang på API-nøkkelen vil kunne opprette nye strengjer som skal omsetjast. Vi tilrår å ha eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og leggje til nye strengjer før du går live. Dette vil hindre at nokon stjeler din hemmelege API-nøkkel, og potensielt aukar storleiken på omsetjingsprosjektet ved å legge til nye, upassande strengjer.

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!