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

Paano ito gumagana

Habang nagiging mas globalisado ang mundo, nagiging lalong 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 upang makamit ito ay ang internationalization (i18n), na nagpapahintulot sa iyo na iangkop ang iyong aplikasyon sa iba't ibang wika, mga 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 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, pipiliin muna natin ang isang i18n library. May ilang kilalang 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 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 isang libreng TacoTranslate account.

Ngayon na na-install mo na ang module, oras na para lumikha ng iyong TacoTranslate account, isang translation project, at mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi nito kailangan ng credit card.

Sa UI ng aplikasyon ng TacoTranslate, lumikha ng isang proyekto, at pumunta sa tab ng API keys nito. Lumikha ng isang read key at isang read/write key. Itatabi natin ang mga ito bilang mga environment variable. Ang read key ang tinatawag natin na 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

Siguraduhing huwag kailanman ilantad ang lihim na read/write API key sa client-side na production environment.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback na locale code. Sa halimbawang ito, itatakda namin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan itatabi ang iyong mga string, tulad ng URL ng iyong website. Basahin ang karagdagang impormasyon tungkol sa origins 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 natin ang TACOTRANSLATE_API_KEY sa loob ng ilang sandali.

Ang paglikha ng client sa isang hiwalay na file ay ginagawang mas madali itong magamit muli 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 custom pageProps at _app.tsx, pakipalawakin ang depinisyon gamit ang mga katangian at code mula sa itaas.

Hakbang 4: Pagpapatupad ng server-side rendering

Pinapayagan ng TacoTranslate ang pag-render sa server ng iyong mga pagsasalin. Malaki ang naitutulong nito sa pagpapabuti ng karanasan ng gumagamit dahil ipinapakita agad ang isinaling nilalaman, sa halip na unang magpakita ng panandaliang hindi isinaling nilalaman. Bukod pa rito, maaari nating iwasan ang mga network request sa kliyente, dahil hawak na natin ang 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 na pagsusuri upang umangkop sa iyong setup. Kung true, ipapakita ng TacoTranslate ang pampublikong API key. Kung tayo ay nasa lokal, test, o staging na environment (isProduction is false), gagamitin namin ang lihim na read/write API key upang matiyak na ang mga bagong string ay maipapadala para sa pagsasalin.

Hanggang ngayon, naitakda lang namin ang Next.js application na may listahan ng mga suportadong wika. Ang susunod na gagawin namin ay kunin ang mga salin para sa lahat ng iyong mga pahina. Upang magawa iyon, gagamitin mo alinman ang getTacoTranslateStaticProps o ang getTacoTranslateServerSideProps batay sa iyong mga pangangailangan.

Ang mga function na ito ay tumatanggap ng tatlong argumento: isang Next.js Static Props Context na objekto, konfigurasyon para sa TacoTranslate, at mga opsyonal na property 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 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 mo nang magamit ang Translate na 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: I-deploy at subukan!

Tapos na kami! Ang iyong Next.js application ay awtomatikong isasalin kapag nagdagdag ka ng anumang mga string sa isang Translate component. Tandaan na tanging ang mga environment na may mga permiso ng read/write sa API key ang makalilikha ng mga bagong string na isasalin. Inirerekomenda namin ang pagkakaroon ng isang sarado at pinrotektahang staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganyang API key, at magdagdag ng mga bagong string bago mag-live. Pipigilan nito ang sinuman sinuman na nakawin ang iyong lihim na API key, at potensyal na magpalobo sa iyong translation project 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!