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

Korleis det fungerer

Ettersom verda blir meir globalisert, blir det stadig viktigare for nettutviklarar å byggje applikasjonar som kan møte brukarar frå ulike land og kulturar. Ein av dei viktigaste måtane å oppnå dette på er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne rettleiinga skal vi utforske korleis du legg til internasjonalisering i din React Next.js-applikasjon, med server side rendering. TL;DR: Sjå det fulle eksempelet her.

Denne guida er for Next.js-applikasjonar som bruker Pages Router.
Om 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. Men i dette dømet vil vi bruke TacoTranslate.

TacoTranslate omset automatisk strengene dine til alle språk ved hjelp av banebrytande AI, og frigjer deg frå det tidkrevjande arbeidet med å handtere JSON-filer.

La oss installere det ved hjelp av 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 din TacoTranslate-konto, eit omsetjingsprosjekt, og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og krev ikkje at du legg inn eit kredittkort.

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver sikker på at du aldri lekkar den hemmelege read/write API-nøkkelen til klient-side produksjonsmiljø.

Vi legg òg til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard tilbakefall-språkkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappa» der strengane dine blir lagra, til dømes URLen til nettsida di. Les meir om originar her.

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

Steg 3: Setje opp TacoTranslate

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

Å opprette klienten i ein eigen fil gjer det lettare å bruke han igjen seinare. No, ved å bruke ein eigardefinert /pages/_app.tsx, vil 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>
	);
}

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

Steg 4: Implementering av server-side rendering

TacoTranslate legg til rette for server-side rendering av oversettelsane dine. Dette forbetrar brukaropplevinga betydeleg ved å vise omsette innhald med ein gong, i staden for først å vise ein blink av ikkje-omsett innhald. I tillegg kan vi hoppe over nettverksforespurnader på klienten, fordi vi allereie har alle oversettelsane vi treng.

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 -sjekken slik at den passar for oppsettet ditt. Dersom true er satt, vil TacoTranslate vise den offentlege API-nøkkelen. Dersom vi er i eit lokalt, test- eller staging-miljø (isProduction is false), vil vi bruke den hemmelege read/write API-nøkkelen for å sikre at nye strengjer blir sende til omsetjing.

Fram til no har vi berre sett opp Next.js-applikasjonen med ei liste over støtta språk. Neste steg er å hente omsetjingar for alle sidene dine. For å gjere det, vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps basert på behova dine.

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 ein av funksjonane i ei side, lat oss anta 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 til å omsetje tekststrengar i alle dine React-komponentar.

import {Translate} from 'tacotranslate/react';

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

Steg 5: Distribuer og test!

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

Hugs å sjekke ut det komplette eksemplet på vår GitHub-profil. Der finn du òg eit døme på korleis du kan gjere dette med App Router ! Om du møter på problem, ikkje nøl med å ta kontakt, så hjelper vi deg gjerne.

TacoTranslate lar deg automatisk lokaliserer React-applikasjonane dine raskt til og frå alle språk. Kom i gang i dag!