Paano ipatupad ang internationalization sa isang Next.js na aplikasyon na gumagamit ng Pages Router

Habang nagiging mas global 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 upang makamit ito ay ang internationalization (i18n), na nagbibigay-daan sa iyo na iakma ang iyong aplikasyon sa iba't ibang wika, 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, mangyaring tingnan ang gabay na ito sa halip.

Hakbang 1: Mag-install ng isang i18n library

Para ipatupad ang internationalization (i18n) sa iyong Next.js application, una nating pipiliin ang isang i18n library. Mayroong ilang kilalang library, kabilang ang next-intl. Gayunpaman, sa halimbawang ito, gagamitin natin ang TacoTranslate.

Tinatranslate ng TacoTranslate nang awtomatiko ang iyong mga string sa anumang wika gamit ang makabagong AI, at inaalis nito ang 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 proyekto sa pagsasalin, at ang mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi mo kailangang maglagay ng credit card.

Sa UI ng aplikasyon ng TacoTranslate, gumawa ng proyekto, at pumunta sa tab na API keys nito. Gumawa ng isang read key, at isang read/write key. Ilalagay namin ang mga ito bilang mga environment variable. Ang read key ang tinatawag naming public, at ang read/write key naman ay secret. Halimbawa, maaari mong ilagay 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 ibunyag ang lihim na read/write API key sa mga client-side production environment.

Magdadagdag din tayo ng dalawang karagdagang environment variable: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

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

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

Hakbang 3: Pagsasaayos ng TacoTranslate

Upang isama ang TacoTranslate sa iyong aplikasyon, kailangan mong gumawa ng client gamit ang mga API key na nabanggit kanina. Halimbawa, gumawa ng 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 sandali lang.

Ang paglikha ng client sa isang hiwalay na file ay nagpapadali na magamit muli ito sa hinaharap. Ngayon, gamit ang isang custom /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 pasadyang pageProps at _app.tsx, mangyaring palawakin ang depinisyon nito sa pamamagitan ng pagdaragdag ng mga property at code mula sa itaas.

Hakbang 4: Pagpapatupad ng rendering sa server

Pinapayagan ng TacoTranslate ang pag-render ng iyong mga pagsasalin sa server. Malaki ang pagpapabuti nito sa karanasan ng mga gumagamit dahil agad na ipinapakita ang isinaling nilalaman, sa halip na unang magpakita ng maikling paglitaw ng hindi pa isinaling nilalaman. Dagdag pa, maaari nating laktawan ang mga network request sa kliyente, dahil mayroon na tayong lahat ng kinakailangang mga 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 public API key. Kung tayo ay nasa local, test, o staging environment (isProduction is false), gagamitin namin ang secret read/write API key upang matiyak na ang mga bagong string ay maipapadala para sa pagsasalin.

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

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

Upang gamitin ang alinman sa mga function sa isang pahina, ipagpalagay natin na 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 upang 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! Ang iyong React application ay awtomatikong maisasalin kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging ang mga kapaligiran na may mga pahintulot na read/write sa API key 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 aplikasiyon sa produksyon gamit ang ganitong API key, at magdagdag ng mga bagong string bago ito ilunsad. Ito ay pipigilan ang sinumang sinumang magnakaw ng iyong lihim na API key, at potensyal na mapalaki ang iyong proyekto sa pagsasalin sa pamamagitan ng pagdaragdag ng mga bagong, hindi kaugnay na string.

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

Pinapahintulutan ng TacoTranslate na awtomatikong ilokalisa ang iyong mga React na aplikasyon nang mabilis papunta at mula sa mahigit 75 wika. Magsimula na ngayon!