Jinsi ya kutekeleza utafsiri wa lugha mbalimbali katika programu ya Next.js inayotumia Pages Router
Fanya programu yako ya React iwe rahisi kufikiwa zaidi na kufikia masoko mapya kwa kutumia uanzishaji wa kimataifa (i18n).
Kadiri dunia inavyozidi kuwa ya kimataifa, ni muhimu zaidi kwa waendelezaji wa wavuti kuunda programu zinazoweza kuwahudumia watumiaji kutoka nchi na tamaduni tofauti. Mojawapo ya njia muhimu za kufanikisha hili ni kupitia utafsiri wa kimataifa (i18n), ambao unakuwezesha kubadilisha programu yako kwa lugha tofauti, sarafu, na miundo ya tarehe.
Kwenye somo hili, tutachunguza jinsi ya kuongeza utafsiri wa kimataifa kwenye programu yako ya React Next.js, ikiwa na uonyesho wa upande wa seva. TL;DR: Tazama mfano kamili hapa.
Mwongozo huu ni kwa ajili ya programu za Next.js ambazo zinatumia Pages Router.
Kama unatumia App Router, tafadhali tazama mwongozo huu badala yake.
Hatua ya 1: Sakinisha maktaba ya i18n
Ili kutekeleza utafsiri wa lugha nyingi katika programu yako ya Next.js, kwanza tuta-chagua maktaba ya i18n. Kuna maktaba maarufu kadhaa, ikiwa ni pamoja na next-intl. Hata hivyo, katika mfano huu, tutatumia TacoTranslate.
TacoTranslate hutafsiri moja kwa moja mistari yako kwa lugha yoyote kwa kutumia AI ya kisasa, na hukupa uhuru kutoka kwa usimamizi wa kuchosha wa faili za JSON.
Hebu tuiweke kwa kutumia npm kwenye terminal yako:
npm install tacotranslate
Hatua ya 2: Unda akaunti ya bure ya TacoTranslate
Sasa ikiwa umeweka moduli, ni wakati wa kuunda akaunti yako ya TacoTranslate, mradi wa tafsiri, na funguo za API zinazohusiana. Unda akaunti hapa. Ni bure, na hahitaji kuongeza kadi ya mkopo.
Ndani ya UI ya programu ya TacoTranslate, tengeneza mradi, na nenda kwenye kichupo cha funguo za API. Tengeneza ufunguo mmoja wa read
, na ufunguo mmoja wa read/write
. Tutaziweka kama vigezo vya mazingira. Ufunguo wa read
ndio tunaoita public
na ufunguo wa read/write
ni secret
. Kwa mfano, unaweza kuziongeza kwenye faili ya .env
katika mzizi wa mradi wako.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Hakikisha hauwahi kufichua siri ya ufunguo wa API read/write
kwa mazingira ya uzalishaji upande wa mteja.
Tutatoa pia mabadiliko mawili zaidi ya mazingira: TACOTRANSLATE_DEFAULT_LOCALE
na TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Nambari ya kijiingilio ya kikoa cha makosa ya chaguo-msingi. Katika mfano huu, tutajua kuwekaen
kwa Kiingereza.TACOTRANSLATE_ORIGIN
: “Folda” ambapo mistari yako itahifadhiwa, kama vile URL ya tovuti yako. Soma zaidi kuhusu asili hapa.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Hatua ya 3: Kusanidi TacoTranslate
Ili kuunganisha TacoTranslate na programu yako, utahitaji kuunda mteja kwa kutumia funguo za API kutoka awali. Kwa mfano, unda faili lenye jina /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;
Tutakuwa tukifafanua kwa otomatiki TACOTRANSLATE_API_KEY
hivi karibuni.
Kuunda mteja katika faili tofauti kunafanya iwe rahisi kuitumia tena baadaye. Sasa, tukitumia /pages/_app.tsx
iliyobinafsishwa, tutaongeza mtoa huduma wa 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>
);
}
Kama tayari una pageProps
na _app.tsx
za kawaida, tafadhali panua ufafanuzi kwa mali na msimbo kutoka juu.
Hatua ya 4: Kutekeleza uwasilishaji upande wa seva
TacoTranslate inaruhusu upigaji picha upande wa seva wa tafsiri zako. Hii inaongeza sana uzoefu wa mtumiaji kwa kuonyesha yaliyotafsiriwa papo hapo, badala ya kuonyesha maudhui ambayo hayajatafsirishwa kwanza kwa muda mfupi. Zaidi ya hayo, tunaweza kuruka maombi ya mtandao upande wa mteja, kwa sababu tayari tunayo tafsiri zote tunazohitaji.
Tutaanza kwa kuunda au kubadilisha /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'),
});
};
Rekebisha ukaguzi wa isProduction
ili kuendana na usanidi wako. Ikiwa true
, TacoTranslate itaonyesha ufunguo wa API ya umma. Ikiwa tuko katika mazingira ya ndani, ya majaribio, au ya jukwaa (isProduction
is false
), tutatumia kitufe cha siri read/write
API ili kuhakikisha kuwa mifuatano mipya inatumwa kwa tafsiri.
Mpaka sasa, tumetengeneza tu programu ya Next.js na orodha ya lugha zinazotumiwa. Kitu kingine tutakachofanya ni kupata tafsiri za kurasa zako zote. Ili kufanya hivyo, utatumia ama getTacoTranslateStaticProps
au getTacoTranslateServerSideProps
kulingana na mahitaji yako.
Funguo hizi zinachukua hoja tatu: Kitu kimoja cha Next.js Static Props Context, usanidi wa TacoTranslate, na mali za hiari za Next.js. Kumbuka kwamba revalidate
kwenye getTacoTranslateStaticProps
imewekwa kuwa 60 kwa default, ili tafsiri zako ziendelee kuwa za kisasa.
Ili kutumia yoyote ya funguo hizi katika ukurasa, tuchukulie kwamba una faili ya ukurasa kama /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!"/>;
}
Sasa unapaswa kuwa na uwezo wa kutumia sehemu ya Translate
kutafsiri mistari ndani ya sehemu zako zote za React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Hatua ya 5: Tumia na jaribu!
Tumaliza! Programu yako ya React sasa itatafsiriwa moja kwa moja unapoongeza mistari yoyote kwenye sehemu ya Translate
. Kumbuka kwamba mazingira yenye ruhusa za read/write
kwa ufunguo wa API tu ndiyo yataweza kuunda mistari mipya ya kutafsiriwa. Tunapendekeza uwe na mazingira ya majaribio yaliyofungwa na salama ambapo unaweza kujaribu programu yako ya uzalishaji kwa ufunguo wa API kama huo, ukiongeza mistari mipya kabla ya kuingia moja kwa moja mtandaoni. Hii itazuia mtu yeyote kuiba ufunguo wako wa siri wa API, na pia kuzuia mradi wako wa tafsiri kupanuka kupita kiasi kwa kuongeza mistari mipya isiyo husiana.
Hakikisha kuangalia mfano kamili kwenye wasifu wetu wa GitHub. Huko, pia utapata mfano wa jinsi ya kufanya hivi ukitumia App Router ! Ikiwa utakutana na matatizo yoyote, jisikie huru kuwasiliana nasi, na tutafurahi sana kusaidia.
TacoTranslate inakuwezesha kuweka lugha za maombi yako ya React moja kwa moja kwa haraka kuelekea na kutoka lugha yoyote. Anza leo!