Ang pinakamahusay na solusyon para sa internationalization (i18n) sa Next.js apps

Paano ito gumagana

Habang ang mundo ay nagiging mas globalisado, 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 nagpapahintulot sa iyo na iakma ang iyong aplikasyon sa iba't ibang mga wika, salapi, 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 mga Next.js application na gumagamit ng Pages Router.
Kung gumagamit ka ng App Router, pakitingnan na lamang ang gabay na ito.

Hakbang 1: Mag-install ng i18n library

Para ipatupad ang internationalization sa iyong Next.js application, pipiliin muna natin ang isang i18n library. Mayroong ilang mga kilalang library, kabilang ang next-intl. Gayunpaman, sa halimbawa na ito, gagamitin natin ang TacoTranslate.

Awtomatikong isinasalin ng TacoTranslate ang iyong mga string sa anumang wika gamit ang makabagong AI, at pinapalaya 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 para gumawa ng iyong TacoTranslate account, isang proyekto sa pagsasalin, at mga kaugnay na API keys. Gumawa ng account dito. Libre ito, at hindi mo kailangang maglagay 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. Itatago natin ang mga ito bilang mga environment variable. 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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback locale code. Sa halimbawa na ito, ise-set 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 tungkol sa origins dito.

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

Hakbang 3: Pagsasaayos ng TacoTranslate

Upang maisama ang TacoTranslate sa iyong application, kakailanganin mong lumikha ng isang kliyente gamit ang mga susi ng API mula sa mas maaga. Halimbawa, lumikha ng isang file na may pangalang /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 idi-define natin ang TACOTRANSLATE_API_KEY sa loob ng ilang sandali.

Ang paglikha ng client sa isang hiwalay na file ay nagpapadali upang magamit muli ito 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, pakipahaba ang depinisyon gamit ang mga propiedad at code mula sa itaas.

Hakbang 4: Pagpapatupad ng server side rendering

Pinapayagan ng TacoTranslate ang server side rendering ng iyong mga pagsasalin. Malaki itong nagpapabuti sa karanasan ng gumagamit sa pamamagitan ng pagpapakita ng isinaling nilalaman agad, sa halip na munang magpakita ng isang flash ng hindi isinaling nilalaman. Bukod pa rito, maaari nating i-skip ang mga network request sa client, dahil mayroon na tayong lahat ng kinakailangang 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, naitakda na natin ang Next.js application na may listahan lamang ng mga suportadong wika. Ang susunod nating gagawin ay kunin ang mga pagsasalin para sa lahat ng iyong mga pahina. Para magawa iyon, gagamitin mo alinman sa 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 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.

Para magamit 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 nang gamitin ang Translate na 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 Next.js application ay awtomatikong maisasalin kapag nagdagdag ka ng anumang string sa isang Translate na component. Tandaan na tanging mga environment lamang na may read/write na permiso sa API key ang makakalikha ng mga bagong string na isasalin. Inirerekomenda naming magkaroon ng sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganitong klase ng API key, at magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinuman mula sa pagnanakaw ng iyong lihim na API key, at posibleng maiwasan ang pagdami ng mga hindi kaugnay na string sa iyong proyekto ng pagsasalin.

Tiyaking tingnan ang kompletong halimbawa sa aming GitHub profile. Dito, 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 kami ay masayang tutulong.

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