Paano mag-implement ng internationalization 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 gumawa ng mga aplikasyon na kayang 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 nagbibigay-daan sa iyo na iangkop ang iyong aplikasyon sa iba't ibang wika, pera, at mga format ng petsa.

Sa tutorial na ito, tatalakayin natin kung paano magdagdag ng 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 Next.js na mga 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 maipatupad ang internationalization sa iyong Next.js application, unang pipili tayo ng i18n na library. Mayroong ilang mga sikat na library, kabilang ang next-intl. Gayunpaman, sa halimbawa na ito, gagamitin natin ang TacoTranslate.

Ang TacoTranslate ay awtomatikong isinasalin ang iyong mga strings sa anumang wika gamit ang makabagong AI, at inilalaya ka mula sa matrabahong 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 na-install mo na ang module, panahon na upang gumawa ng iyong TacoTranslate account, isang proyekto ng pagsasalin, at mga kaugnay na API keys. Gumawa ng account dito. Libre ito, at hindi kailangan 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 variable. Ang read key ang tinatawag nating public at ang read/write key ay secret. Halimbawa, maaari mo silang idagdag sa isang .env file sa root ng iyong proyekto.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Tiyaking huwag kailanman maipakalat ang lihim na read/write API key sa mga client side production environments.

Magdaragdag din tayo ng dalawang 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 Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan iyong mga string ay itatago, gaya ng URL ng iyong website. Basahin pa tungkol sa mga origin dito.

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

Hakbang 3: Pagsasaayos ng TacoTranslate

Para maisama ang TacoTranslate sa iyong aplikasyon, kailangan mong gumawa ng client gamit ang mga API key mula sa naunang bahagi. 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 ide-define natin ang TACOTRANSLATE_API_KEY sa lalong madaling panahon.

Ang paggawa ng client sa hiwalay na file ay nagpapadali upang magamit muli sa hinaharap. Ngayon, gamit ang 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, paki-extend ang depinisyon gamit ang mga katangian at code mula sa itaas.

Hakbang 4: Pagpapatupad ng server side rendering

Pinapayagan ng TacoTranslate ang server side rendering ng iyong mga salin. Malaki ang naitutulong nito sa pagpapahusay ng karanasan ng gumagamit sa pamamagitan ng agarang pagpapakita ng isinaling nilalaman, sa halip na munang magpakita ng panandaliang hindi isinaling nilalaman. Bukod pa rito, maaari nating laktawan ang mga network request sa kliyente dahil mayroon na tayong lahat ng mga kinakailangang salin.

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, nakapagsimula na tayo sa Next.js application gamit ang 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.

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

Upang magamit ang alinman sa mga function na ito sa isang pahina, ipagpalagay natin na 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 ay maaari mo nang gamitin ang Translate na component upang isalin ang mga string sa loob ng 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 tayo! Ang iyong React application ay awtomatikong masasalin ngayon kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging ang mga environment na may read/write na pahintulot sa API key lamang ang makakalikha ng mga bagong string na maisasalin. Inirerekomenda namin na magkaroon ng isang sarado at seguradong staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganitong API key, na nagdadagdag ng mga bagong string bago ito maging live. Makakapigil ito sa sinuman mula sa pagnanakaw ng iyong lihim na API key, at posibleng maiwasan ang pagdami ng iyong proyekto sa pagsasalin sa pamamagitan ng pagdagdag ng mga bagong, hindi kaugnay na string.

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

Pinaaalalahanan ka ng TacoTranslate na awtomatikong ilokalisa ang iyong mga React application nang mabilis papunta at mula sa anumang wika. Magsimula na ngayon!