Ang pinakamahusay na solusyon para sa internasyonal na pag-i18n (i18n) sa mga Next.js na app

Paano ito gumagana

Habang nagiging mas global ang mundo, lalong nagiging mahalaga para sa mga web developer na gumawa ng mga aplikasyon na makakatugon sa mga gumagamit mula sa iba't ibang bansa at kultura. Isa sa mga pangunahing paraan para makamit ito ay ang internasyonal na pag-aangkop (i18n), na nagbibigay-daan sa iyo na iakma ang iyong aplikasyon sa iba't ibang wika, pera, at pormat ng petsa.

Sa tutorial na ito, tatalakayin natin kung paano magdagdag ng internasyonal na pag-aangkop sa iyong React Next.js na aplikasyon, na may 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 sa halip.

Hakbang 1: Mag-install ng isang i18n library

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

TacoTranslate ay awtomatikong isinasalin ang iyong mga string sa anumang wika gamit ang makabagong AI, at inilalayo 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 account sa TacoTranslate

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

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

Idadagdag din namin ang dalawang karagdagang variable ng kapaligiran: 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 itatago ang iyong mga string, tulad ng URL ng iyong website. Magbasa 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 lumikha ng isang client gamit ang mga API key na nabanggit kanina. Halimbawa, lumikha 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 itatakda namin ang TACOTRANSLATE_API_KEY sa sandali.

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, 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 pasadyang pageProps at _app.tsx, pakipahabain ang depinisyon gamit ang mga katangian at kodigo mula sa itaas.

Hakbang 4: Pagpapatupad ng pag-render sa server

Pinapahintulutan ng TacoTranslate ang pag-render ng iyong mga pagsasalin sa server. Lubos nitong pinapabuti ang karanasan ng gumagamit sa pamamagitan ng agarang pagpapakita ng naisaling nilalaman, sa halip na magpakita muna ng panandaliang hindi pa naisaling nilalaman. Bukod pa rito, maaari nating laktawan ang mga kahilingan sa network mula sa kliyente, dahil nasa atin na ang lahat ng mga pagsasalin na kailangan natin.

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 lokal, test, o staging na 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 lamang namin ang Next.js application na may listahan ng mga sinusuportahang wika. Ang susunod na gagawin natin ay kunin ang mga salin para sa lahat ng iyong mga pahina. Upang magawa iyon, gagamitin mo alinman sa getTacoTranslateStaticProps o getTacoTranslateServerSideProps ayon sa iyong mga kinakailangan.

Ang mga function na ito ay tumatanggap ng tatlong argumento: isang Next.js Static Props Context object, 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 up-to-date 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 ngayon ay maaari mo nang gamitin ang Translate component 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: Ilunsad at subukan!

Tapos na! Awtomatikong maisasalin ang iyong Next.js application kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging ang mga environment na may read/write na permiso 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 production application gamit ang ganoong API key, at magdagdag ng mga bagong string bago ito ilunsad. Ito ay pipigil sa sinumang sinumang magnakaw ng iyong lihim na API key, at posibleng magdulot ng labis na paglobo ng iyong proyekto ng pagsasalin sa pamamagitan ng pagdaragdag ng mga bagong, hindi kaugnay na string.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!