An réiteach is fearr do idirnáisiúntaíocht (i18n) i bhfeidhmchláir Next.js
An bhfuil tú ag iarraidh do iarratas Next.js a leathnú chuig margaí nua? Déanann TacoTranslate é an-éasca do thionscadal Next.js a áitiúlú, ag cur ar do chumas lucht féachana domhanda a bhaint amach gan stró.
Cén fáth a roghnóidh tú TacoTranslate do Next.js?
- Comhtháthú Gan Mhoill: Deartha go sonrach do iarratais Next.js, déanann TacoTranslate comhtháthú gan stró isteach i do shruth oibre reatha.
- Bailiú Uathoibríoch D’Shnáithíní: Níl ort níos mó bainistiú láimhe a dhéanamh ar chomhaid JSON. Bailíonn TacoTranslate snáithíní go huathoibríoch ó do bhunachar cód.
- Aistriúcháin Cumhachtaithe ag AI: Úsáid cumhacht an AI chun aistriúcháin chruinne comhthéacsúla a sholáthar a oireann do thon do d’iarratais.
- Tacaíocht Teanga Láithreach: Cuir tacaíocht leis do theangacha nua le cliceáil amháin, ag déanamh do iarratais inrochtana ar fud an domhain.
Conas a oibríonn sé
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 iarratais a thógáil a fhreastalaíonn ar úsáideoirí ó thíortha agus cultúir éagsúla. Ceann de na bealaí is tábhachtaí chun é seo a bhaint amach ná trí idirnáisiúniú (i18n), a ligeann duit do chuid iarratais a oiriúnú do theangacha, do airgeadraí, agus do fhormáidí dáta éagsúla.
Sna ranganna teagaisc seo, beimid ag déanamh iniúchta ar conas idirnáisiúniú a chur le d’iarratas React Next.js, le léiriú ar thaobh an fhreastalaí. TL;DR: Féach an sampla iomlán anseo.
Tá an treoir seo d’iarratais Next.js atá á n-úsáid ag an Pages Router.
Má tá tú ag úsáid an App Router, féach an treoir seo ina ionad.
Céim 1: Suiteáil leabharlann i18n
Chun idirnáisiúnt a chur i bhfeidhm i do fheidhmchlár Next.js, roghnóimid leabharlann i18n ar dtús. Tá roinnt leabharlann coitianta ann, lena n-áirítear next-intl. Mar sin féin, sa sampla seo, beidh muid ag úsáid TacoTranslate.
Déantar TacoTranslate do shraitheanna a aistriú go huathoibríoch chuig aon teanga ag baint úsáide as AI nua-aimseartha, agus scaoileann sé saor thú ó bhainistíocht leadránach comhad JSON.
Lig dúinn é a shuiteáil ag úsáid npm i do chríochfort:
npm install tacotranslate
Céim 2: Cruthaigh cuntas saor in aisce TacoTranslate
Anois go bhfuil an modúl suiteáilte agat, tá sé in am do chuntas TacoTranslate a chruthú, tionscadal aistriúcháin, agus eochracha API gaolmhara. Cruthaigh cuntas anseo. Tá sé saor in aisce, agus ní éilíonn sé ort cárta creidmheasa a chur leis.
Laistigh den UI aip TacoTranslate, cruthaigh tionscadal, agus téigh chuig an cluaisín eochracha API. Cruthaigh eochair amháin read
, agus eochair amháin eile read/write
. Sábhálfaimid iad mar athróga comhshaoil. Is é an eochair read
atá a dtugaimid public
uirthi agus is é an eochair read/write
an eochair secret
. Mar shampla, d’fhéadfá iad a chur le comhad .env
i mbonn do thionscadail.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Bí cinnte gan an eochair API rúnda read/write
a sceitheadh riamh chuig timpeallachtaí táirgeachta taobh an chliaint.
Cuirfimid dhá athróg chomhshaoil eile leis freisin: TACOTRANSLATE_DEFAULT_LOCALE
agus TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: An cód réamhshocraithe don teanga athshlánaithe. Sa sampla seo, socróimid é goen
do Béarla.TACOTRANSLATE_ORIGIN
: An “fillteán” ina stóráilfear do shreingeanna, mar shampla URL do shuímh ghréasáin. Léigh tuilleadh faoi bhunús anseo.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Céim 3: Ag socrú TacoTranslate
Chun TacoTranslate a chomhtháthú le d’iarratas, beidh ort cliant a chruthú ag úsáid na eochracha API ó níos luaithe. 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;
Beimid ag sainmhíniú TACOTRANSLATE_API_KEY
go huathoibríoch 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 soláthraí TacoTranslate
leis.
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, leathnaigh an sainmhíniú leis na hairíonna agus an cód thuas.
Céim 4: Ag cur i bhfeidhm léiriúchán taobh an fhreastalaí
Ligeann TacoTranslate do léiriú taobh an fhreastalaí ar do aistriúcháin. Feabhsaíonn sé seo go mór an taithí úsáideora trí ábhar aistrithe a thaispeáint láithreach, in ionad splanc ábhair neamh-aistrithe ar dtús. Ina theannta sin, is féidir linn iarraidh líonra ar an gcliant a sheachaint, toisc 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 athrú.
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ála isProduction
chun freastal ar do shocrú. Mura bhfuil an luach true
ann, taispeánfaidh TacoTranslate an eochair API phoiblí. Má táimid i dtimpeallacht á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 na slabhraí nua le haistriúchán.
Go dtí seo, ní raibh againn ach liosta de na teangacha tacaithe a socrú don iarratas Next.js. An chéad rud eile a dhéanfaimid ná aistrithe a fháil do gach ceann de do leathanaigh. Chun é sin a dhéanamh, úsáidfidh tú ceann de getTacoTranslateStaticProps
nó getTacoTranslateServerSideProps
bunaithe ar do chuid riachtanas.
Tugann na feidhmeanna seo trí argóintí: Aon réad Next.js Static Props Context, cumraíocht do TacoTranslate, agus airíonna roghnacha Next.js. Tabhair faoi deara go bhfuil revalidate
ar getTacoTranslateStaticProps
socraithe go 60 de réir réamhshocraithe, ionas go mbeidh do aistriúcháin cothrom le dáta.
Chun aon cheann den dá fheidhm a úsáid i leathanach, glacaimid leis 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 srings 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 foilsiú agus tástáil!
Táimid críochnaithe! Beidh do fheidhmchlár Next.js anois aistrithe go huathoibríoch nuair a chuirfidh tú aon shreanga chuig comhpháirt Translate
. Tabhair faoi deara nach mbeidh ach timpeallachtaí le ceadanna read/write
ar an eochair API in ann sreanga nua a chruthú le haghaidh aistriúcháin. Molaimid timpeallacht stáitse dún agus slán a bheith agat inar féidir leat do fheidhmchlár táirgthe a thástáil leis an eochair API sin, ag cur sreanga nua leis sular téann tú beo. Cuirfidh sé seo cosc ar dhuine ar bith do eochair API rúnda a ghoid, agus go bhféadfaidh sé do thionscadal aistriúcháin a mhéadú go mídhleathach trí shreanga nua, neamhtheagmhálacha a chur leis.
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!