Pi bon solisyon pou entènasyonalizasyon (i18n) nan aplikasyon Next.js yo
Èske w ap chèche elaji aplikasyon Next.js ou a nan nouvo mache? TacoTranslate fasilite anpil lokalizasyon pwojè Next.js ou a, ki pèmèt ou rive jwenn yon odyans mondyal san okenn traka.
Poukisa chwazi TacoTranslate pou Next.js?
- Entégrasyon San Pwoblèm: Konsepsyon espesyalman pou aplikasyon Next.js, TacoTranslate entegre fasil nan workflow ki egziste deja ou.
- Koleksyon Kòd Otomatik: Pa gen bezwen jere fichye JSON manyèlman ankò. TacoTranslate kolekte strings yo otomatikman soti nan baz kòd ou.
- Tradiksyon Pouvwa pa AI: Sèvi ak pouvwa AI pou bay tradiksyon ki egzak selon kontèks epi ki adapte ak ton aplikasyon ou.
- Sipò Lang Imenyèl: Ajoute sipò pou nouvo lang ak yon sèl klik, sa ki fè aplikasyon ou aksesib globalman.
Kijan li fonksyone
Kòm mond lan ap vin plis globalize, li vin pi enpòtan pou devlopè entènèt yo konstwi aplikasyon ki ka sèvi itilizatè ki soti nan diferan peyi ak kilti. Youn nan fason kle pou reyalize sa se atravè entènasyonalizasyon (i18n), ki pèmèt ou adapte aplikasyon ou a diferan lang, lajan, ak fòma dat.
Nan tutoryèl sa a, n ap eksplore kijan pou ajoute entènasyonalizasyon nan aplikasyon React Next.js ou a, avèk rannman bò sèvè. TL;DR: Gade egzanp konplè a isit la.
Gid sa a se pou aplikasyon Next.js ki ap itilize Pages Router.
Si w ap itilize App Router, tanpri gade gid sa a olye.
Etap 1: Enstale yon bibliyotèk i18n
Pou aplike entènasyonalizasyon nan aplikasyon Next.js ou a, n ap premye chwazi yon bibliyotèk i18n. Gen plizyè bibliyotèk popilè, tankou next-intl. Sepandan, nan egzanp sa a, n ap itilize TacoTranslate.
TacoTranslate tradwi otomatikman fisèl ou yo nan nenpòt lang lè l sèvi avèk AI avanse, e li delivre w soti nan jesyon fatigan fichye JSON yo.
Ann enstale li avèk npm nan tèminal ou:
npm install tacotranslate
Etap 2 : Kreye yon kont TacoTranslate gratis
Kounye a ke ou enstale modil la, li lè pou kreye kont TacoTranslate ou an, yon pwojè tradiksyon, ansanm ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, e li pa mande pou ou ajoute yon kat kredi.
Nan entèfas itilizatè aplikasyon TacoTranslate la, kreye yon pwojè, epi navige nan tab kle API li yo. Kreye yon kle read
, epi yon kle read/write
. N ap sove yo kòm varyab anviwònman. Kle read
la se sa nou rele public
, epi kle read/write
la se secret
. Pa egzanp, ou ta ka ajoute yo nan yon fichye .env
nan rasin pwojè ou a.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Asire w pou pa janm lage kle read/write
API sekrè a nan anviwònman pwodiksyon bò kliyan an.
N ap ajoute tou de lòt varyab anviwònman: TACOTRANSLATE_DEFAULT_LOCALE
ak TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Kòd lang defo a. Nan egzanp sa a, n ap mete lien
pou lang angle.TACOTRANSLATE_ORIGIN
: "Katab" kote teks ou yo ap estoke, tankou URL sitwèb ou a. Li plis sou orijin yo isit la.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Etap 3: Konfigirasyon TacoTranslate
Pou entegre TacoTranslate ak aplikasyon ou an, w ap bezwen kreye yon kliyan lè l sèvi avèk kle API yo soti pi bonè. Pa egzanp, kreye yon fichye ki rele /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;
N ap otomatikman defini TACOTRANSLATE_API_KEY
byento.
Kreye kliyan an nan yon fichye apa fè li pi fasil pou itilize ankò pita. Kounye a, itilize yon /pages/_app.tsx
koutim, n ap ajoute founisè TacoTranslate
.
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>
);
}
Si ou deja gen pageProps
ak _app.tsx
pèsonalize, tanpri elaji definisyon an avèk pwopriyete yo ak kòd ki nan seksyon anwo a.
Etap 4: Aplike rannman bò sèvè a
TacoTranslate pèmèt rann sou sèvè nan tradiksyon ou yo. Sa amelyore anpil eksperyans itilizatè a lè li montre kontni tradui imedyatman, olye pou yon flash kontni ki pa tradui premye. Anplis, nou kapab sote demann rezo sou kliyan an, paske nou deja gen tout tradiksyon nou bezwen yo.
Nou pral kòmanse pa kreye oswa modifye /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'),
});
};
Modifye isProduction
chèk la kostim konfigurasyon ou. Si true
, TacoTranslate pral sifas kle API piblik la. Si nou nan yon lokal, tès, oswa anviwònman rete (isProduction
is false
), nou pral sèvi ak kle sekrè a read/write
API a asire w ke nouvo strings yo voye pou tradiksyon.
Jiska kounye a, nou sèlman configuré aplikasyon Next.js lan ak yon lis lang ki sipòte yo. Pwochen bagay nou pral fè se pran tradiksyon pou tout paj ou yo. Pou fè sa, ou pral itilize swa getTacoTranslateStaticProps
oswa getTacoTranslateServerSideProps
selon bezwen ou yo.
Fonksyon sa yo pran twa agiman: Youn se yon objè Next.js Static Props Context, konfigirasyon pou TacoTranslate, ak pwopriyete Next.js opsyonèl. Remake ke revalidate
sou getTacoTranslateStaticProps
mete sou 60 pa default, konsa tradiksyon ou yo rete ajou.
Pou itilize youn nan fonksyon sa yo nan yon paj, ann sipoze ou genyen yon fichye paj tankou /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!"/>;
}
Kounye a ou ta dwe kapab itilize konpozan Translate
la pou tradui chenn karaktè nan tout konpozan React ou yo.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Etap 5: Pibliye epi teste!
Nou fini! Aplikasyon Next.js ou a pral kounye a tradui otomatikman lè ou ajoute nenpòt chèn nan yon Translate
konpozan. Sonje byen ke sèlman anviwònman ki gen pèmisyon read/write
sou kle API a ap kapab kreye nouvo chèn pou tradui. Nou rekòmande pou gen yon anviwònman tès ki fèmen epi sekirize kote ou ka teste aplikasyon pwodiksyon ou a ak yon kle API konsa, ajoute nouvo chèn anvan ou ale an dirèk. Sa ap anpeche nenpòt moun vòlè kle API sekrè ou a, epi potansyèlman anfle pwojè tradiksyon ou a pa ajoute nouvo chèn ki pa gen rapò.
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!