Paano ipatupad ang internationalization sa isang Next.js na aplikasyon na gumagamit ng Pages Router.
Gawing mas accessible ang iyong React application at maabot ang mga bagong merkado gamit ang internationalization (i18n).
Habang nagiging mas globalisado ang mundo, lalong nagiging mahalaga para sa mga web developer na gumawa ng mga aplikasyon na kayang tugunan ang pangangailangan ng 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'yo na iangkop ang iyong aplikasyon sa iba't ibang wika, pera, at mga pormato ng petsa.
Sa tutorial na ito, tatalakayin natin kung paano magdagdag ng internationalization sa iyong React Next.js na aplikasyon, kasama 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.
Hakbang 1: Mag-install ng i18n na library
Upang ipatupad ang internationalization sa iyong Next.js na aplikasyon, pipiliin muna natin ang isang i18n library. Mayroong ilang mga sikat na 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 naka-install na ang module, oras na para gumawa ng iyong TacoTranslate account, isang translation project, at ang mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi kinakailangan ng credit card.
Sa loob ng TacoTranslate application UI, gumawa ng isang proyekto, at pumunta sa tab na 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
Siguraduhing huwag kailanman ilantad ang lihim na read/write
API key sa mga client-side production environment.
Idadagdag din namin ang dalawang karagdagang environment variable: TACOTRANSLATE_DEFAULT_LOCALE
at TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Ang default na fallback locale code. Sa halimbawang ito, itatakda namin ito saen
para sa Ingles.TACOTRANSLATE_ORIGIN
: Ang “folder” kung saan ise-save 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
Para maisama ang TacoTranslate sa iyong aplikasyon, kakailanganin mong lumikha 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 sandali.
Ang paggawa ng client sa isang hiwalay na file ay nagpapadali ng muling paggamit nito 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 property at code mula sa itaas.
Hakbang 4: Pagsasagawa ng server side rendering
Pinapahintulutan ng TacoTranslate ang pag-render ng iyong mga pagsasalin sa server. Malaki ang pagpapabuti nito sa karanasan ng gumagamit dahil ipinapakita agad ang isinaling nilalaman, sa halip na magpakita muna ng panandaliang hindi-isinaling nilalaman. Dagdag pa rito, maaari nating laktawan ang mga kahilingan sa network sa kliyente, dahil mayroon na tayong lahat ng kinakailangang pagsasalin.
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, naitakda lamang 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. Para doon, gagamitin mo alinman sa 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 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 magamit 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 magagamit mo na ngayon ang Translate
na 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: I-deploy at subukan!
Tapos na! Awtomatikong masasalin na ngayon ang iyong React 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 nakasarado at secure na staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganoong API key, at magdagdag ng mga bagong string bago ilunsad ito. Mapipigilan nito ang sinumang sinumang magnakaw ng iyong lihim na API key, at posibleng magdulot ng paglobo ng iyong proyekto sa pagsasalin sa pamamagitan ng pagdaragdag ng mga bagong, hindi kaugnay na string.
Siguraduhing tingnan ang kumpletong halimbawa sa aming GitHub profile. Doon, makakakita ka rin ng isang halimbawa kung paano gawin ito gamit ang App Router! Kung makakaranas ka ng anumang problema, huwag mag-atubiling makipag-ugnayan, at ikalulugod naming tumulong.
Pinapayagan ka ng TacoTranslate na awtomatikong i-localize ang iyong mga React application nang mabilis papunta at mula sa mahigit 75 wika. Magsimula na ngayon!