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 å bygge applikasjonar som kan møte brukarar frå ulike land og kulturar. Ein av hovudmetodane for å oppnå dette er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til ulike språk, valutaer og datoformat.

I denne guida vil vi utforske korleis du kan legge til internasjonalisering i din React Next.js-applikasjon, med server-side rendering. TL;DR: Sjå heile eksempelet her.

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

Steg 1: Installer eit i18n-bibliotek

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

TacoTranslate omset automatisk strengane dine til kva som helst språk ved hjelp av banebrytande AI, og frigjer deg frå 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 din TacoTranslate-konto, eit oversettingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og du treng ikkje å leggje til eit kredittkort.

I TacoTranslate-applikasjonen si brukargrensesnitt, opprett eit prosjekt, og naviger til fana 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 kallar vi 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

Ver sikker på å aldri lekke den hemmelige read/write API-nøkkelen til produksjonsmiljø på klientsida.

Vi vil også legge til to fleire miljøvariablar: TACOTRANSLATE_DEFAULT_LOCALE og TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Standard språkkode for reserveløysing. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappa» der tekstane dine blir lagra, som til dømes nettadressa 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 ein fil kalla /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 enklare å bruke han igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, skal vi legge til TacoTranslate provider-en.

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, vennligst utvid definisjonen med eigenskapane og koden frå ovanfor.

Steg 4: Implementering av server-side rendering

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

Vi startar 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 for å passe til oppsettet ditt. Dersom true, vil TacoTranslate vise den offentlege API-nøkkelen. Om 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 vert sendt til omsetjing.

Frem 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 omsetjingar 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 ein av funksjonane på ei side, let 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 strengjer 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 nokre strengjer i ein Translate komponent. Merk at berre miljø med read/write tilgang på API-nøkkelen vil kunne opprette nye strengjer som skal omsettast. Vi anbefaler å 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 den hemmelege API-nøkkelen din, og potensielt øydeleggje oversetjingsprosjektet ditt ved å leggje til nye, irrelevante strengjer.

Hugs å sjekke ut det fullstendige eksempelet på vår GitHub-profil. Der vil du også finne 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 med glede.

TacoTranslate gjer at du automatisk kan lokaliserer dine React-applikasjonar raskt til og frå alle språk. Kom i gang i dag!