Paano ipatupad ang internationalization (i18n) sa isang Next.js application na gumagamit ng Pages Router

Habang nagiging mas globalisado ang mundo, lalong nagiging mahalaga para sa mga web developer na bumuo ng mga aplikasyon na makakatugon sa mga gumagamit mula sa iba't ibang bansa at kultura. Isa sa mga pangunahing paraan para makamit ito ay ang internationalization (i18n), na nagpapahintulot sa iyo na iangkop ang iyong aplikasyon sa iba't ibang mga wika, mga pera, at mga format ng petsa.

Sa tutorial na ito, tatalakayin natin kung paano idagdag ang internationalization sa iyong React Next.js na aplikasyon, kasama ang server-side rendering. TL;DR: Tingnan ang buong halimbawa dito.

Ang gabay na ito ay para sa mga Next.js na aplikasyon na gumagamit ng Pages Router.
Kung gumagamit ka ng App Router, pakitingnan ang gabay na ito sa halip.

Hakbang 1: Mag-install ng i18n na library

Upang ipatupad ang internationalization sa iyong Next.js na aplikasyon, uuna nating pipiliin ang isang i18n na library. Mayroong ilang mga sikat na library, kabilang ang next-intl. Gayunpaman, sa halimbawang ito, gagamitin natin ang TacoTranslate.

Tinutranslate ng TacoTranslate nang awtomatiko ang iyong mga string sa anumang wika gamit ang makabagong AI, at inilalaya ka mula sa nakakapagod na pamamahala ng mga JSON file.

I-install natin ito gamit ang npm sa iyong terminal:

npm install tacotranslate

Hakbang 2: Lumikha ng libreng TacoTranslate account

Ngayon na na-install mo na ang module, oras na para gumawa ng iyong TacoTranslate account, isang proyektong pagsasalin, at mga kaukulang API key. Gumawa ng account dito. Libre ito, at hindi nito kinakailangan ang pagdaragdag ng credit card.

Sa loob ng UI ng TacoTranslate application, gumawa ng isang proyekto, at pumunta sa tab ng mga API key nito. Gumawa ng isang read key, at isang read/write key. Ise-save namin ang mga ito bilang mga environment variable. Ang read key ay tinatawag naming public, at ang read/write key naman ay secret. Halimbawa, maaari mong idagdag ang mga ito sa isang .env file sa root ng iyong proyekto.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Siguraduhing huwag kailanman isiwalat ang lihim na read/write API key sa mga production environment sa client-side.

Idadagdag din namin ang dalawang karagdagang environment variable: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback locale code. Sa halimbawa na ito, itatakda namin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan ise-save ang iyong mga string, tulad ng URL ng iyong website. Basahin pa ang tungkol sa mga pinagmulan dito.

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

Hakbang 3: Pagsasaayos ng TacoTranslate

Para isama ang TacoTranslate sa iyong aplikasyon, kailangan mong gumawa ng isang client gamit ang mga API key na nakuha mo kanina. Halimbawa, gumawa ng isang file na pinangalanang /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;

Awtomatikong itatakda ang TACOTRANSLATE_API_KEY sandali na lang.

Ang paggawa ng client sa isang hiwalay na file ay nagpapadali para magamit muli ito sa hinaharap. Ngayon, gamit ang custom /pages/_app.tsx, idaragdag namin ang TacoTranslate provider.

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>
	);
}

Kung mayroon ka nang custom pageProps at _app.tsx, pakipalawakin ang kanilang definisyon gamit ang mga property at code mula sa itaas.

Hakbang 4: Pagpapatupad ng server-side rendering

Pinapayagan ng TacoTranslate ang server-side rendering ng iyong mga pagsasalin. Malaki ang ipinapabuti nito sa karanasan ng gumagamit dahil agad na ipinapakita ang isinaling nilalaman, sa halip na magkaroon muna ng sandaling pagpapakita ng hindi pa isinaling nilalaman. Bukod pa rito, maaari nating laktawan ang mga network request sa kliyente, dahil mayroon na tayong lahat ng pagsasalin na kailangan natin.

Magsisimula tayo sa pamamagitan ng paglikha o pagbabago ng /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'),
	});
};

Baguhin ang pagsusuri ng isProduction upang umangkop sa iyong setup. Kung true, ipapakita ng TacoTranslate ang pampublikong API key. Kung tayo ay nasa lokal, test, o staging na environment (isProduction is false), gagamitin namin ang lihim na read/write API key upang tiyakin na ang mga bagong string ay naipapadala para sa pagsasalin.

Hanggang ngayon, naitakda na lang natin ang aplikasyon ng Next.js na may listahan ng mga sinusuportahang wika. Ang susunod nating gagawin ay kunin ang mga pagsasalin para sa lahat ng iyong mga pahina. Para gawin iyon, gagamitin mo alinman ang getTacoTranslateStaticProps o getTacoTranslateServerSideProps batay sa iyong mga pangangailangan.

Ang mga function na ito ay tumatanggap ng tatlong argumento: isang Next.js Static Props Context object, ang konfigurasyon para sa TacoTranslate, at mga opsyonal na property ng Next.js. Tandaan na ang revalidate sa getTacoTranslateStaticProps ay naka-set sa 60 bilang default, upang manatiling napapanahon ang iyong mga pagsasalin.

Upang gamitin ang alinmang function sa isang pahina, ipagpalagay nating mayroon kang file ng pahina tulad ng /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!"/>;
}

Dapat ay maaari mo na ngayong gamitin ang Translate na component para isalin ang mga string sa lahat ng iyong mga React component.

import {Translate} from 'tacotranslate/react';

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

Hakbang 5: I-deploy at subukan!

Tapos na! Awtomatikong isasalin ang iyong React application kapag nagdagdag ka ng anumang string sa isang Translate component. Tandaan na tanging mga environment na may permiso na read/write sa API key ang makakalikha ng mga bagong string na isasalin. Inirerekomenda naming magkaroon ng isang sarado at seguradong staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganoong API key, at magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinuman sinuman mula sa pagnanakaw ng iyong lihim na API key, at ang posibleng paglobo ng iyong proyektong pagsasalin dahil sa pagdagdag ng mga bagong, hindi kaugnay na string.

Siguraduhing tingnan ang kumpletong halimbawa sa aming GitHub profile. Dito rin, makakakita ka ng halimbawa kung paano gawin ito gamit ang App Router! Kung makakaranas ka ng anumang problema, huwag mag-atubiling makipag-ugnayan, at ikalulugod naming tumulong.

Pinapayagan ng TacoTranslate na awtomatikong i-localize ang iyong mga React application nang mabilis papunta at mula sa mahigit 75 wika. Magsimula na ngayon!