Paano magpatupad ng internationalization sa isang Next.js application na gumagamit ng Pages Router

Habang nagiging mas globalisado ang mundo, lalo pang nagiging mahalaga para sa mga web developer na gumawa ng mga aplikasyon na kaya nilang tugunan ang mga gumagamit mula sa iba't ibang bansa at kultura. Isa sa mga pangunahing paraan upang makamit ito ay sa pamamagitan ng internationalization (i18n), na nagpapahintulot sa iyo na iakma ang iyong aplikasyon sa iba't ibang mga wika, pera, at mga format ng petsa.

Sa tutorial na ito, susuriin natin kung paano magdagdag ng 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 bilang kapalit.

Hakbang 1: Mag-install ng i18n na librarya

Upang maisakatuparan ang internationalization sa iyong Next.js application, pipiliin muna natin ang isang i18n library. Maraming kilalang mga librarya, kabilang na ang next-intl. Gayunpaman, sa halimbawang ito, gagamit tayo ng TacoTranslate.

Ang TacoTranslate ay awtomatikong isinasalin ang iyong mga string sa anumang wika gamit ang makabagong AI, at inilalaya ka nito mula sa nakakapagod na pamamahala ng mga JSON file.

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

npm install tacotranslate

Hakbang 2: Gumawa ng libreng TacoTranslate account

Ngayong naka-install mo na ang module, oras na para gumawa ng iyong TacoTranslate account, isang proyekto sa pagsasalin, at mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi kailangan ng credit card.

Sa loob ng UI ng aplikasyon ng TacoTranslate, gumawa ng isang proyekto, at pumunta sa tab ng API keys nito. Gumawa ng isang read key, at isang read/write key. Ise-save natin ang mga ito bilang environment variables. Ang read key ay tinatawag nating public at ang read/write key ay secret. Halimbawa, maaari mo itong idagdag sa isang .env file sa root ng iyong proyekto.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Siguraduhing huwag kailanman i-leak ang secret read/write API key sa client side production environments.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback locale code. Sa halimbawang ito, itatakda natin ito sa en para sa English.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan itatago ang iyong mga string, tulad ng URL ng iyong website. Magbasa pa tungkol sa mga origin dito.

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

Hakbang 3: Pagsasaayos ng TacoTranslate

Upang maisama ang TacoTranslate sa iyong aplikasyon, kakailanganin mong gumawa ng client gamit ang mga API key mula 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 namin ang TACOTRANSLATE_API_KEY sa madaling panahon.

Ang paggawa ng client sa isang hiwalay na file ay nagpapadali upang magamit muli ito sa hinaharap. Ngayon, gamit ang isang custom na /pages/_app.tsx, idadagdag natin 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, pakipalawigin ang depinisyon gamit ang mga properties 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 naitutulong nito sa pagpapabuti ng karanasan ng gumagamit sa pamamagitan ng agarang pagpapakita ng isinalin na nilalaman, sa halip na isang saglit na pagpapakita ng hindi isinaling nilalaman muna. Bukod pa rito, maaaring laktawan ang mga network request sa kliyente dahil hawak na natin ang lahat ng kinakailangang pagsasalin.

Magsisimula tayo sa 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 isProduction check upang umangkop sa iyong setup. Kung true, ipapakita ng TacoTranslate ang pampublikong API key. Kung kami ay nasa isang lokal, pagsubok, o staging na kapaligiran (isProduction is false), gagamitin namin ang lihim na read/write API key upang matiyak na ang mga bagong string ay ipinadala para sa pagsasalin.

Hanggang ngayon, naitakda na lang natin ang Next.js application gamit ang isang listahan ng mga suportadong wika. Ang susunod nating gagawin ay kunin ang mga pagsasalin para sa lahat ng iyong mga pahina. Para gawin iyon, gagamitin mo ang getTacoTranslateStaticProps o getTacoTranslateServerSideProps, depende sa iyong mga pangangailangan.

Kumuha ang mga function na ito ng tatlong argumento: Isang Next.js Static Props Context na object, konfigurasyon para sa TacoTranslate, at opsyonal na mga katangian 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 alinman sa mga function na ito sa isang pahina, ipagpalagay natin na mayroon kang isang 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 kaya mo na ngayong gamitin ang Translate component upang isalin ang mga string sa loob ng lahat ng iyong React components.

import {Translate} from 'tacotranslate/react';

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

Hakbang 5: I-deploy at subukan!

Tapos na tayo! Ang iyong React application ay awtomatikong maisasalin kapag nagdagdag ka ng anumang mga string sa Translate na component. Tandaan na tanging ang mga environment na may read/write na permiso sa API key lamang ang makakalikha ng mga bagong string para isalin. Inirerekomenda naming magkaroon ng isang sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganoong klase ng API key, nagdadagdag ng mga bagong string bago ito maging live. Makakaiwas ito sa sinumang magnakaw ng iyong secret API key, at posibleng mapalaki nang hindi kinakailangan ang iyong translation project sa pamamagitan ng pagdagdag ng mga bagong, hindi kaugnay na mga string.

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

Pinapayagan ka ng TacoTranslate na awtomatikong i-localize ang iyong mga React application nang mabilis sa kahit anong wika palabas at pabalik. Magsimula na ngayon!