Ang pinakamahusay na solusyon para sa internationalization (i18n) sa mga Next.js na app
Nais mo bang palawakin ang iyong Next.js application sa mga bagong merkado? Ginagawang napakadali ng TacoTranslate na i-localize ang iyong Next.js na proyekto, na nagbibigay-daan sa iyo upang maabot ang isang pandaigdigang madla nang walang kahirap-hirap.
Bakit pipiliin ang TacoTranslate para sa Next.js?
- Walang Patid na Integrasyon: Dinisenyo partikular para sa mga Next.js na aplikasyon, ang TacoTranslate ay madaling iniintegrate sa iyong kasalukuyang workflow.
- Awtomatikong Pangongolekta ng Mga String: Hindi na kailangan pang manu-manong pamahalaan ang mga JSON file. Awtomatikong kinokolekta ng TacoTranslate ang mga string mula sa iyong codebase.
- Mga Pagsasaling Pinagana ng AI: Gamitin ang kapangyarihan ng AI upang magbigay ng mga pagsasaling tumpak ayon sa konteksto na akma sa tono ng iyong aplikasyon.
- Agad na Suporta sa Wika: Magdagdag ng suporta para sa mga bagong wika sa isang pindot lang, na ginagawang globally accessible ang iyong aplikasyon.
Paano ito gumagana
Habang ang mundo ay nagiging mas globalisado, nagiging mas mahalaga para sa mga web developer na gumawa ng mga aplikasyon na kaya 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 nagbibigay-daan sa iyo upang iangkop ang iyong aplikasyon sa iba't ibang wika, pera, at mga format ng petsa.
Sa tutorial na ito, tatalakayin natin kung paano magdagdag ng internationalization sa iyong React Next.js application, 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, mangyaring tingnan ang gabay na ito bilang kapalit.
Hakbang 1: Mag-install ng isang i18n na librarya
Upang maipatupad ang internationalization sa iyong Next.js na aplikasyon, unang pipili tayo ng isang i18n library. Mayroong ilang mga sikat na library, kabilang ang next-intl. Gayunpaman, sa halimbawa na ito, gagamitin natin ang TacoTranslate.
Ang TacoTranslate ay awtomatikong isinasalin ang iyong mga string sa anumang wika gamit ang makabagong AI, at inilalaya 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 TacoTranslate na account
Ngayong na-install mo na ang module, oras na para gumawa ng iyong TacoTranslate account, isang proyekto ng pagsasalin, at mga kaugnay na API keys. Gumawa ng account dito. Libre ito, at hindi kailangan na magdagdag ng credit card.
Sa loob ng UI ng TacoTranslate application, gumawa ng isang proyekto, at pumunta sa tab ng API keys nito. Gumawa ng isang read
key, at isang read/write
key. Ise-save natin ang mga ito bilang environment variables. 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
Siguraduhing huwag kailanman maipagkalat ang lihim na read/write
API key sa client side production environments.
Magdaragdag din kami ng dalawang karagdagang environment variables: TACOTRANSLATE_DEFAULT_LOCALE
at TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Ang default na fallback locale code. Sa halimbawang ito, itatakda natin ito saen
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 aplikasyon, kakailanganin mong gumawa ng client gamit ang mga API key mula sa nakaraang bahagi. 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 idi-defina natin ang TACOTRANSLATE_API_KEY
sa sandaling ito.
Ang paggawa ng client sa hiwalay na file ay nagpapadali para 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 na pageProps
at _app.tsx
, pakipalakihin ang depinisyon gamit ang mga properties 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 sa pamamagitan ng agarang pagpapakita ng isinalin na nilalaman, sa halip na unang ipakita ang hindi pa isinaling nilalaman. Bukod pa rito, maaari nating laktawan ang mga kahilingan sa network 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 lamang namin ang Next.js application gamit ang listahan ng mga sinusuportahang wika. Ang susunod nating gagawin ay kunin ang mga pagsasalin para sa lahat ng iyong mga pahina. Para gawin iyon, gagamitin mo alinman sa getTacoTranslateStaticProps
o getTacoTranslateServerSideProps
ayon 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 opsyonal na mga 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 alinmang 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 kaya mo nang gamitin ang Translate
na component para isalin ang mga string sa 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 na aplikasyon ay awtomatikong maisasalin kapag nagdagdag ka ng anumang mga string sa isang Translate
component. Tandaan na ang mga environment lamang na may read/write
na mga pahintulot sa API key ang makakalikha ng mga bagong string na isasalin. Inirerekumenda naming magkaroon ng isang sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application gamit ang ganitong API key, nagdadagdag ng mga bagong string bago ito i-live. Makakaiwas ito sa sinuman mula sa pagnanakaw ng iyong sikreto na API key, at posibleng pagpapalaki ng iyong translation project sa pamamagitan ng pagdaragdag ng mga bagong, hindi kaugnay na mga 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!