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

Ettersom verda vert meir globalisert, vert det stadig viktigare for nettutviklarar å byggje applikasjonar som kan møta brukarar frå ulike land og kulturar. Ein av dei viktigaste måtane å få til dette på er internasjonalisering (i18n), som gjer at du kan tilpasse applikasjonen din til ulike språk, valutaar og datoformat.

I denne rettleiinga skal vi sjå korleis du legg til internasjonalisering i React Next.js-applikasjonen din, med rendering på serversida. TL;DR: Sjå det fullstendige dømet her.

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

Steg 1: Installer eit i18n-bibliotek

For å implementere internasjonalisering i Next.js-applikasjonen din, startar vi med å velje eit i18n-bibliotek. Det finst fleire populære bibliotek, mellom anna next-intl. I dette dømet brukar vi derimot TacoTranslate.

TacoTranslate omset automatisk strengane dine til alle språk ved hjelp av avansert AI, og sparar deg for den tidkrevjande handsaminga av JSON-filer.

Lat oss installere det med npm i terminalen din:

npm install tacotranslate

Steg 2: Opprett ei gratis TacoTranslate-konto

No når du har installert modulen, er det på tide å opprette TacoTranslate-kontoen din, eit oversettingsprosjekt og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og krev ikkje at du oppgir eit kredittkort.

I TacoTranslate-applikasjonens brukargrensesnitt, opprett eit prosjekt og gå til fanen for API-nøklar. Opprett ein read nøkkel og ein read/write nøkkel. Vi lagrar dei som miljøvariablar. Den read nøkkelen er det vi kallar public, og read/write nøkkelen er secret. Til dømes kan du leggje dei til i ei .env fil i rotmappa i prosjektet ditt.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pass på at du aldri lekkjer den hemmelege read/write API-nøkkelen i produksjonsmiljø på klientsida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Standard fallback-lokalkode. I dette eksempelet set vi den til en for engelsk.
• TACOTRANSLATE_ORIGIN: Mappa der strengane dine vil bli lagra, som 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: 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 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 automatisk definere TACOTRANSLATE_API_KEY snart.

Å opprette klienten i ei separat fil gjer det lettare å bruke den 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 legg til eigenskapane og koden ovanfor i definisjonen.

Steg 4: Implementering av serverside-rendering

TacoTranslate gir støtte for server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald med det same, i staden for at brukarane først ser eit kort augeblikk med uomsett innhald. I tillegg kan vi unngå nettverkskall 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 oppsettet ditt. Dersom true, vil TacoTranslate vise fram 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 å sørgje for at nye strenger blir sendt for omsetjing.

Fram til no har vi berre sett opp Next.js-applikasjonen med ei liste over språk som vert støtta. Neste steg er å hente omsetjingane for alle sidene dine. For å gjere det, vil du bruke anten getTacoTranslateStaticProps eller getTacoTranslateServerSideProps avhengig av krava 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 er sett til 60 som standard, slik at omsetjingane dine held seg oppdatert.

For å bruke ein av funksjonane på ei side, la 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 strengar i alle React-komponentane dine.

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 omsett automatisk når du legg til strengar i ein Translate komponent. Merk at berre miljø med read/write rettar på API-nøkkelen vil kunne opprette nye strengar som skal omsetjast. Vi anbefaler at du har eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ei slik API-nøkkel, og leggje til nye strengar før du går live. Dette vil hindre kven som helst kven som helst i å stjele den hemmelege API-nøkkelen din, og potensielt blåse opp omsetjingsprosjektet ditt ved å leggje til nye, ikkje-relaterte strengar.

Hugs å sjekke ut det komplette eksemplet på vår GitHub-profil. Der vil du også finne eit døme på korleis du gjer dette med App Router! Om du møter på problem, ta gjerne kontakt, så hjelpar vi deg gjerne.

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