Korleis implementere internasjonalisering i ein Next.js-applikasjon som bruker Pages Router

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

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

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

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 vil vi derimot bruke TacoTranslate.

TacoTranslate omset automatisk strengane dine til kva som helst språk med banebrytande AI, og lèt deg sleppe den monotone handteringa av JSON-filer.

La oss installere det ved å bruke 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 å legge inn kredittkort.

Innenfor TacoTranslate-applikasjonen sin brukargrensesnitt, opprett eit prosjekt, og naviger til API-nøklane fanen. Opprett ein read nøkkel, og ein read/write nøkkel. Vi lagrar 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 ein .env fil i roten av prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Ver kjend med å aldri lekkje den hemmelige read/write API-nøkkelen til klient-side produksjonsmiljø.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Den føresette locale-koden som blir brukt som reserve. I dette dømet set vi han til en for engelsk.
• TACOTRANSLATE_ORIGIN: «Mappa» der tekstane dine blir lagra, til dømes URL-en til nettsida di. Les meir om originar her.

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

Steg 3: Sette opp TacoTranslate

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

Å opprette klienten i ei eiga fil gjer det lettare å bruke ho igjen seinare. No, ved å bruke ein tilpassa /pages/_app.tsx, legg 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 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 omsettingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsette tekstar med ein gong, i staden for først å vise eit augeblikk med uomnsette tekstar. I tillegg kan vi hoppe over nettverksforespurnader på klienten, sidan vi allereie har alle omsettingane 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 -kontrollen slik at den passar for oppsettet ditt. Dersom true, vil TacoTranslate gjere den offentlege API-nøkkelen tilgjengeleg. 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 sendt til 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 er sett til 60 som standard, slik at omsetjingane dine held seg oppdaterte.

For å bruke den eine eller andre funksjonen i ei side, lat oss føresetje 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! React-applikasjonen din vil no bli automatisk omsett når du legg til nokre strengjer i ein Translate komponent. Merk at det berre er miljø med read/write tilgang på API-nøkkelen som kan opprette nye strengjer for omsetjing. 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 lansering. Dette vil hindre at nokon stjel din hemmelege API-nøkkel, og potensielt blåse opp omsetjingsprosjektet ditt ved å leggje til nye, usamanhengande strengjer.

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å gjer vi vårt beste for å hjelpe deg.

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