Conas idirnáisiúntaíocht a chur i bhfeidhm i iarratas Next.js atá ag úsáid Pages Router
Déan do fheidhmchlár React níos inrochtana agus bain sroicheadh ar margaí nua le idirnáisiúnú (i18n).
De réir mar a éiríonn an domhan níos idirnáisiúnta, tá sé ag éirí níos tábhachtaí do fhorbróirí gréasáin feidhmchláir a chruthú a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí lárnacha chun é seo a bhaint amach ná trí idirnáisiúntacht (i18n), a ligfidh duit do fheidhmchlár a oiriúnú do theangacha, do chuid airgeadais, agus do fhormáidí dáta éagsúla.
TL;DR: Féach ar an sampla iomlán anseo.
Tá an treoir seo do iarratais Next.js atá ag úsáid an Pages Router.
Má tá tú ag úsáid an App Router, féach ar an treoir seo ina ionad.
Céim 1: Suiteáil leabharlann i18n
Chun idirnáisiúntaíocht a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid chéad uair leabharlann i18n. Tá roinnt leabharlann cáiliúla ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, beimid ag úsáid TacoTranslate.
Déantar TacoTranslate le do shreingeanna a aistriú go huathoibríoch chuig aon teanga ag úsáid AI ceannródaíoch, agus scaoiltear tú ó bhainistíocht leadránach na gcomhad JSON.
Déanaimis é a shuiteáil ag baint úsáide as npm i do therminal:
npm install tacotranslate
Céim 2: Cruthaigh cuntas TacoTranslate saor in aisce
Anois go bhfuil an modúl suiteáilte agat, is am é chun do chuntas TacoTranslate, tionscadal aistriúcháin, agus eochracha API gaolmhara a chruthú. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus níl ort cárta creidmheasa a chur leis.
Laistigh den chomhéadan úsáideora TacoTranslate, cruthaigh tionscadal, agus téigh go cluaisín na n-eochracha API. Cruthaigh eochair amháin read
, agus eochair amháin read/write
. Sábhálfaimid iad mar athrálaithe comhshaoil. Is é an eochair read
a thugaimid public
uirthi agus is é an eochair read/write
an secret
. Mar shampla, d’fhéadfá iad a chur le comhad .env
i fréamh do thionscadail.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Bí cinnte gan riamh eochair API rúnda read/write
a scaoileadh isteach i dtimpeallachtaí táirgthe taobh an chliaint.
Cuireamar dhá athróg chomhshaoil bhreise leis freisin: TACOTRANSLATE_DEFAULT_LOCALE
agus TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: An cód réamhshocraithe socraitheaisin. Sa sampla seo, socróimid é aren
do Bhéarla.TACOTRANSLATE_ORIGIN
: An “fillteán” ina n-úsáidfear do shnáitheanna, cosúil le URL do shuíomh gréasáin. Léigh tuilleadh faoi thúsanna anseo.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Céim 3: Ag socrú TacoTranslate
Chun TacoTranslate a chomhtháthú le d'fheidhmchlár, beidh ort cliant a chruthú ag baint úsáide as na heochracha API ó shin. Mar shampla, cruthaigh comhad darb ainm /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;
Beidh muid ag sainmhíniú go huathoibríoch TACOTRANSLATE_API_KEY
go luath.
Ag cruthú an chliaint i gcomhad ar leithligh déanann sé níos éasca é a úsáid arís níos déanaí. Anois, ag baint úsáide as /pages/_app.tsx
saincheaptha, cuirfimid an soláthraí 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>
);
}
Má tá pageProps
agus _app.tsx
saincheaptha agat cheana féin, le do thoil síne an sainmhíniú leis na hairíonna agus an cód ón mbonn thuas.
Céim 4: Ag cur i bhfeidhm léiriúchán taobh an fhreastalaí
Ligeann TacoTranslate do sheachadadh taobh freastalaí do do aistriúcháin. Feabhsaíonn sé seo an taithí úsáideora go mór trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc de ábhar neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn éileamh líonra ar an gcliant a sheachaint, mar go bhfuil na haistriúcháin go léir atá uainn againn cheana féin.
Tosóimid trí /next.config.js
a chruthú nó a mhodhnú.
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'),
});
};
Athraigh an seiceáil isProduction
chun oiriúnú do do shuiteáil. Má tá true
, déanfaidh TacoTranslate eochair API phoiblí a thaispeáint. Má táimid i gcomhthéacs áitiúil, tástála, nó stáitse (isProduction
is false
), úsáidfimid an eochair API rúnda read/write
chun a chinntiú go seoltar sreanga nua le haistriúchán.
Go dtí seo, ní raibh againn ach liosta de na teangacha tacaíochta a shocrú don iarratas Next.js. An chéad rud eile a dhéanfaidh muid ná aistriúcháin a fháil do do na leathanaigh go léir. Chun é sin a dhéanamh, úsáidfidh tú nó getTacoTranslateStaticProps
nó getTacoTranslateServerSideProps
bunaithe ar do riachtanais.
Tógann na feidhmeanna seo trí argóint: ceann amháin de chineál Next.js Static Props Context, cumraíocht do TacoTranslate, agus airíonna roghnach Next.js. Tabhair faoi deara go bhfuil revalidate
ar getTacoTranslateStaticProps
socraithe go 60 de ghnáth, ionas go mairfidh do aistriúcháin suas chun dáta.
Chun aon cheann de na feidhmeanna seo a úsáid i leathanach, déanaimis glacadh go bhfuil comhad leathanach agat cosúil le /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!"/>;
}
Ba chóir go mbeifeá in ann anois an comhlacht Translate
a úsáid chun sreanga a aistriú laistigh de do gach comhlacht React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Céim 5: Déan imscaradh agus tástáil!
Táimid déanta! Beidh do aip React anois aistrithe go huathoibríoch nuair a chuirfidh tú aon shnáitheanna leis an gcomhpháirt Translate
. Tabhair faoi deara nach mbeidh ach timpeallachtaí a bhfuil ceadanna read/write
acu ar an eochair API in ann snáitheanna nua a chruthú le haistriú. Molaimid timpeallacht staging dhúnadh agus shlándáilte a bheith agat ina féidir leat do aip táirgthe a thástáil leis an eochair API sin, ag cur snáitheanna nua leis sular téann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair rúnda API a ghoid agus b’fhéidir go gcuirfí do thionscadal aistriúcháin i mbaol trí shnáitheanna nua nach mbaineann leis an ábhar a chur leis.
Cuirfidh tú a fháil faoi dheireadh an sampla iomlán ar ár bpróifíl GitHub. Anseo gheobhaidh tú freisin sampla ar conas é seo a dhéanamh ag úsáid an App Router! Má thagann aon fhadhb ort, ná bíodh aon leisce ort teagmháil a dhéanamh, agus beidh áthas orainn cabhrú leat.
Ligíonn TacoTranslate duit suíomh a dhéanamh ar do chuid feidhmchlár React go huathoibríoch ó agus chuig níos mó ná 75 teanga go tapa. Tosú inniu!