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 å byggje applikasjonar som kan tilpassast brukarar frå ulike land og kulturar. Ein av hovudmåtene å oppnå dette på er gjennom internasjonalisering (i18n), som lar deg tilpasse applikasjonen din til forskjellige språk, valuttar og datoformat.

I denne tutorialen skal vi utforske korleis du kan leggje 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 bruker 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 likevel bruke TacoTranslate.

TacoTranslate omset automatisk strengane dine til kva som helst språk ved hjelp av ei toppmoderne AI, og frigjer deg frå den tidkrevjande 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 ein TacoTranslate-konto, eit omsetjingsprosjekt, og tilhøyrande API-nøklar. Opprett ein konto her. Det er gratis, og kræver ikkje at du legg til kredittkort.

I TacoTranslate-applikasjonen, 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 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 aldri den hemmelige read/write API-nøkkelen til produksjonsmiljø på klientsida.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Den standard lokale fallback-koden. 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 origins 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 snart automatisk definere TACOTRANSLATE_API_KEY.

Å lage klienten i ein separat fil gjer det enklare å bruke han på nytt seinare. No, med bruk av ein tilpassa /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>
	);
}

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 legg til rette for server-side rendering av omsetjingane dine. Dette forbetrar brukaropplevinga mykje ved å vise omsett innhald umiddelbart, i staden for først å vise ein kort blink av uomsett innhald. 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 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 strenger 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 strengar i ein Translate komponent. Merk at berre miljø med read/write tilgangar på API-nøkkelen vil kunne opprette nye strengar for omsetjing. Vi tilrår å ha eit lukka og sikra staging-miljø der du kan teste produksjonsapplikasjonen din med ein slik API-nøkkel, og legge til nye strengar før du går live. Dette vil hindre at nokon stjeler den hemmelege API-nøkkelen din, og potensielt blir prosjektet ditt oppblåst med nye, irrelevante strengar.

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!