Paano mag-implementa ng internationalization sa isang Next.js application na gumagamit ng Pages Router

Habang ang mundo ay nagiging mas globalisado, lalong nagiging mahalaga para sa mga web developer na 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 iangkop ang iyong aplikasyon sa iba't ibang wika, pera, at mga pormat ng petsa.

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

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

Hakbang 1: Mag-install ng i18n library

Upang maipatupad ang internationalization sa iyong Next.js application, unang pipili tayo ng i18n library. Mayroong ilang mga sikat na library, kabilang ang next-intl. Gayunpaman, sa halimbawang ito, gagamitin natin ang TacoTranslate.

Ang TacoTranslate ay awtomatikong isinasalin ang iyong mga string sa anumang wika gamit ang makabagong AI, at inaalis 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: Gumawa ng libreng TacoTranslate account

Ngayon na na-install mo na ang module, oras na upang lumikha ng iyong TacoTranslate account, isang proyekto ng pagsasalin, at mga kaugnay na API keys. 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 mga API key nito. Gumawa ng isang read key, at isang read/write key. Ise-save natin ang mga ito bilang mga environment variable. 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

Tiyaking huwag kailanman ilahad ang sikreto read/write API key sa mga client side production environments.

Magdaragdag din tayo 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 itatago ang iyong mga string, tulad ng URL ng iyong website. Basahin pa ang 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 naunang nabanggit. 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 ida-defina ang TACOTRANSLATE_API_KEY sa sandaling ito.

Ang paggawa ng client sa isang hiwalay na file ay nagpapadali na magamit ito muli 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 na pageProps at _app.tsx, pakipahaba 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 pagpapabuti nito sa karanasan ng gumagamit sa pamamagitan ng agad na pagpapakita ng isinalin na nilalaman, sa halip na maunang magpakita ng hindi pa naisalin na nilalaman. Bukod dito, maaari nating laktawan ang mga network request sa client, dahil mayroon na tayong lahat ng kinakailangang mga pagsasalin.

Magsisimula tayo sa pamamagitan ng paggawa 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, nakapaloob pa lamang sa Next.js application ang isang listahan ng mga suportadong wika. Ang susunod na gagawin natin ay kunin ang mga pagsasalin para sa lahat ng iyong mga pahina. Para gawin iyon, gagamitin mo ang getTacoTranslateStaticProps o getTacoTranslateServerSideProps base sa iyong mga pangangailangan.

Ang mga function na ito ay tumatanggap ng tatlong argumento: Isang Next.js Static Props Context object, configuration para sa TacoTranslate, at opsyonal na mga katangian ng Next.js. Pansinin 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 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 nang gamitin ang Translate na component para isalin ang mga string sa lahat ng iyong mga React components.

import {Translate} from 'tacotranslate/react';

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

Hakbang 5: I-deploy at subukan!

Tapos na kami! Ang iyong React application ay awtomatikong maisasalin kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging ang mga environment na may read/write permiso 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 ganoong API key, at magdagdag ng mga bagong string bago ito ilathala. Makakatulong ito upang mapigilan ang sinuman na nakawin ang iyong secret API key, at posibleng maiwasan ang pagdami ng mga hindi kaugnay na string sa iyong translation project.

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

Pinapahintulutan ka ng TacoTranslate na awtomatikong i-localize ang iyong mga React application nang mabilis sa higit sa 75 wika. Magsimula ngayon!