Ang pinakamahusay na solusyon para sa internationalization (i18n) sa mga app ng Next.js

Paano ito gumagana

Habang nagiging mas globalisado 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 para makamit ito ay ang internasyonal na pag-aangkop (i18n), na nagpapahintulot 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 idagdag ang internasyonal na pag-aangkop (i18n) 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 na aplikasyon 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 na aplikasyon, pipiliin muna natin ang isang i18n na library. May ilang popular na mga library, kabilang ang next-intl. Gayunpaman, sa halimbawang ito, gagamitin natin ang TacoTranslate.

Awtomatikong isinasalin ng TacoTranslate ang iyong mga string sa anumang wika gamit ang makabagong AI, at pinapalaya ka nito mula sa 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 account sa TacoTranslate

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

Sa loob ng UI ng TacoTranslate application, gumawa ng isang proyekto, at pumunta sa tab ng mga API key. Create one read key, and one read/write key. Ise-save 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.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na code para sa fallback na locale. Sa halimbawang ito, itatakda namin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan ilalagay ang iyong mga string, tulad 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

Upang maisama ang TacoTranslate sa iyong aplikasyon, kakailanganin mong gumawa ng isang client gamit ang mga API key na nabanggit kanina. 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 itatakda namin ang TACOTRANSLATE_API_KEY sa lalong madaling panahon.

Mas madaling magamit muli ang client kung gagawin ito sa isang hiwalay na file. 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, palawakin ang depinisyon gamit ang mga property 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 naitutulong nito sa pagpapabuti ng karanasan ng gumagamit dahil agad na ipinapakita ang isinaling nilalaman, sa halip na magpakita muna ng panandaliang hindi isinaling nilalaman. Dagdag pa, maaari nating laktawan ang mga kahilingan sa network sa kliyente, dahil mayroon na tayong lahat ng kinakailangang pagsasalin.

Magsisimula tayo sa 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 pagsusuri ng isProduction upang umangkop sa iyong setup. Kung true, ipapakita ng TacoTranslate ang pampublikong API key. Kung nasa lokal, test, o staging na environment tayo (isProduction is false), gagamitin namin ang lihim na read/write API key upang matiyak na ang mga bagong string ay naipapadala para sa pagsasalin.

Hanggang ngayon, itinakda lang natin 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. Para gawin iyon, gagamitin mo alinman ang getTacoTranslateStaticProps o ang getTacoTranslateServerSideProps batay sa iyong mga pangangailangan.

Ang mga function na ito ay tumatanggap ng tatlong argumento: ang isang Next.js Static Props Context object, ang konfigurasyon para sa TacoTranslate, at mga opsyonal na properties ng Next.js. Tandaan na ang 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 component para 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! Ang iyong Next.js application ay awtomatikong masasalin kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging mga environment na may read/write na pahintulot 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 ganoong API key, at magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinuman na magnakaw ng iyong lihim na API key, at posibleng maiwasan ang pagdami ng mga hindi kaugnay na string na magpapalobo sa iyong translation project.

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!