Paano mag-implement 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 ang gumawa ng mga aplikasyon na maaaring 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 wika, pera, at format ng petsa.

Sa tutorial na ito, tatalakayin 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 isang i18n library

Upang ipatupad ang internationalization sa iyong Next.js na aplikasyon, pipiliin muna natin ang isang i18n na library. Mayroong ilang mga kilalang library, kabilang 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 inililigtas ka mula sa nakakapagod na pamamahala ng mga JSON file.

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

npm install tacotranslate

Hakbang 2: Gumawa ng libreng TacoTranslate account

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

Sa loob ng TacoTranslate application UI, 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 mga environment variables. Ang read key ang 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 ipalabas ang lihim na read/write API key sa client side production environments.

Magdadagdag din kami ng dalawang karagdagang environment variables: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback locale code. Sa halimbawa na ito, itatakda natin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang "folder" kung saan ilalagay ang iyong mga string, tulad ng URL ng iyong website. Basahin ang higit 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 sa nakaraan. 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 malalagay ang TACOTRANSLATE_API_KEY sa sandaling ito.

Ang paggawa ng client sa isang hiwalay na file ay nagpapadali sa muling paggamit nito sa hinaharap. Ngayon, gamit ang isang custom na /pages/_app.tsx, idaragdag 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, pakia-extend ang depinisyon gamit ang mga properties at code mula sa itaas.

Hakbang 4: Pagpapatupad ng server side rendering

Pinapahintulutan 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 isinaling nilalaman, sa halip na magpakita muna ng panandaliang hindi isinaling nilalaman. Bukod dito, maaari nating laktawan ang mga network request sa client, dahil hawak na natin lahat ng kinakailangang pagsasalin.

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 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 na gagawin natin ay kunin ang mga salin para sa lahat ng iyong mga pahina. Upang gawin iyon, gagamitin mo ang alinman sa getTacoTranslateStaticProps o getTacoTranslateServerSideProps batay sa iyong mga pangangailangan.

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

Para gamitin ang alinman sa mga function na ito sa isang pahina, ipagpalagay nating mayroon kang isang page file 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 ngayon ay maaari mo nang 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!"/>
}

Step 5: I-deploy at subukan!

Tapos na tayo! Ang iyong React application ay awtomatikong maisasalin kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging mga environment na may read/write na pahintulot sa API key lamang ang makakalikha ng mga bagong string na isasalin. Inirerekomenda naming magkaroon ng isang sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganung API key, upang makapagdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinuman mula sa pagnanakaw ng iyong lihim na API key, at posibleng makapagpabusog sa iyong proyekto ng pagsasalin sa pamamagitan ng pagdaragdag ng mga bagong, hindi kaugnay na mga string.

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

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