Mafi kyawun mafita don ƙasashen duniya (i18n) cikin Next.js apps
Shin kuna neman faɗaɗa aikace-aikacenku na Next.js zuwa sabbin kasuwanni? TacoTranslate yana sanya shi ƙwarai da gaske don saita Next.js ɗinku da harshen gida, yana ba ku damar isa ga masu sauraro na duniya ba tare da wata matsala ba.
Me ya sa za a zaɓi TacoTranslate don Next.js?
- Hadin kai Ba Tare da Matsala ba: An tsara don ayyukan Next.js musamman, TacoTranslate yana haɗuwa cikin sauƙi cikin tsarin aikin ku na yanzu.
- Tattara Rubutattun Kalmomi ta atomatik: Ba kwa buƙatar sarrafa fayilolin JSON da hannu. TacoTranslate yana tattara kalmomi daga tushen lambar ku ta atomatik.
- Fassarar Da AI ke Tallafawa: Amfani da ƙarfin AI don bayar da fassarori masu dacewa da mahallin da suke dacewa da salon aikace-aikacen ku.
- Tallafin Harshe Nan da Nan: Kara tallafi ga sababbin harsuna da dannawa ɗaya kawai, yana sa aikace-aikacen ku ya samu damar isa ga duniya baki ɗaya.
Yadda yake aiki
Yayinda duniya ke kara zama ta hanyar hada kowa da kowa, yana da muhimmanci ga masu haɓaka yanar gizo su gina aikace-aikace da za su iya bauta wa masu amfani daga ƙasashe da al’adu daban-daban. Daya daga cikin manyan hanyoyin cimma wannan shine ta hanyar internationalization (i18n), wanda yake baka damar daidaita aikace-aikacenka ga harsuna daban-daban, kudade, da tsarin kwanaki.
A cikin wannan darasin, za mu bincika yadda ake ƙara internationalization cikin aikace-aikacen React Next.js ɗinka, tare da server side rendering. TL;DR: Duba cikakken misali anan.
Wannan jagora yana nufin aikace-aikacen Next.js waɗanda ke amfani da Pages Router.
Idan kuna amfani da App Router, don Allah ku duba wannan jagorar maimakon haka.
Mataki na 1: Shigar da ɗakin karatu na i18n
Don aiwatar da internationalization a cikin aikace-aikacen Next.js ɗinka, za mu fara zaɓar ɗakin karatu na i18n. Akwai ɗakunan karatu da dama da suka shahara, ciki har da next-intl. Duk da haka, a cikin wannan misalin, za mu yi amfani da TacoTranslate.
TacoTranslate na fassara kalmomin ka ta atomatik zuwa kowace harshe ta amfani da AI mai zamani, kuma yana 'yantar da kai daga wahalar sarrafa fayilolin JSON.
Bari mu girka shi ta amfani da npm a cikin tashar umarninka:
npm install tacotranslate
Mataki na 2: Ƙirƙiri asusun TacoTranslate kyauta
Yanzu da ka shigar da ƙarin kayan aikin, lokaci ya yi da za ka ƙirƙiri asusun TacoTranslate naka, aikin fassara, da kuma maɓallan API masu alaƙa. Ƙirƙiri asusu anan. Kyauta ne, kuma ba ya buƙatar ka ƙara kati na bashi.
A cikin ƙirar aikace-aikacen TacoTranslate, ƙirƙiri aikin, kuma kewaya zuwa shafin maɓallan API ɗinsa. Ƙirƙiri maɓalli ɗaya na read
, da kuma maɓalli ɗaya na read/write
. Za mu ajiye su a matsayin canje-canje na muhalli. Maɓallin read
shi ne abin da muke kira public
kuma maɓallin read/write
shi ne secret
. Misali, za ka iya ƙara su cikin fayil ɗin .env
a tushen aikin ka.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Tabbatar da cewa kada ka taɓa saki sirrin read/write
API key zuwa yanayin samarwa na ɓangaren abokin ciniki.
Za mu kuma ƙara wasu canje-canje na muhalli guda biyu: TACOTRANSLATE_DEFAULT_LOCALE
da TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Lambar yare ta tsoho da za a koma gare ta. A cikin wannan misalin, za mu saita ta zuwaen
don Turanci.TACOTRANSLATE_ORIGIN
: "Jaka" inda za a adana mga rubutunka, kamar adireshin URL na gidan yanar gizonka. Karanta ƙarin bayani game da tushen nan.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Mataki na 3: Saitin TacoTranslate
Don haɗa TacoTranslate da aikace-aikacen ku, za ku buƙaci ƙirƙirar abokin ciniki ta amfani da maɓallan API daga baya. Misali, ƙirƙiri fayil mai suna /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;
Za mu ƙaddara TACOTRANSLATE_API_KEY
ta atomatik ba da jimawa ba.
Ƙirƙirar abokin ciniki a cikin wani fayil daban yana sauƙaƙa amfani da shi a gaba. Yanzu, ta amfani da na musamman /pages/_app.tsx
, za mu ƙara mai ba da 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>
);
}
Idan kuna da pageProps
na musamman da _app.tsx
, da fatan za a fadada ma’anar tare da kayan aiki da lambar da ke sama.
Mataki na 4: Aiwtar da fassarar ɓangaren uwar garke
TacoTranslate yana ba da damar yin rendering na fassarar ku a bangaren uwar garke. Wannan yana ƙara inganta ƙwarewar mai amfani ta hanyar nuna abun cikin da aka fassara nan da nan, maimakon fara da nunin abun ciki da bai fassaru ba. Bugu da kari, za mu iya tsallake buƙatun hanyar sadarwa a bangaren abokin ciniki, saboda mun riga mun samu duk fassarorin da muke bukata.
Za mu fara ta hanyar ƙirƙira ko gyara /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'),
});
};
Gyara duba isProduction
don ya dace da saitinka. Idan true
, TacoTranslate zai nuna mabuɗin API na jama'a. Idan muna cikin yanayin gida, gwaji, ko gwaji mai shiri (isProduction
is false
), za mu yi amfani da sirrin read/write
mabuɗin API don tabbatar da cewa sabbin jimloli suna tura zuwa fassara.
Har zuwa yanzu, mun ƙirƙiri aikace-aikacen Next.js tare da jerin harsunan da aka tallafawa kawai. Abu na gaba da za mu yi shi ne ɗaukar fassarar dukkan shafukan ku. Don yin hakan, za ku yi amfani da ko dai getTacoTranslateStaticProps
ko getTacoTranslateServerSideProps
bisa ga bukatunku.
Wannan ayyukan suna ɗaukar hujjoji guda uku: Ɗaya Next.js Static Props Context abu, saiti na TacoTranslate, da zaɓaɓɓun halaye na Next.js. Lura cewa revalidate
a kan getTacoTranslateStaticProps
an saita shi zuwa 60 a tsoho, don haka fassarar ku ta kasance sabuntacce.
Don amfani da kowanne daga cikin waɗannan ayyukan a cikin shafi, bari mu ɗauka kana da fayil ɗin shafi kamar /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!"/>;
}
Ya kamata yanzu ku iya amfani da Translate
ɓangaren don fassara jumloli a cikin dukkanin kayan aikin React ɗinku.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Mataki na 5: Bayar da gwaji!
Mun gama! Yanzu aikace-aikacenku na Next.js zai fassara kansa ta atomatik lokacin da kuka ƙara kowace kirtani a cikin Translate
bangare. Lura cewa kawai yanayi masu izinin read/write
akan maɓallin API za su iya ƙirƙirar sabbin kirtani don a fassara. Muna ba da shawarar samun yanayin gwaji na musamman kuma mai tsaro inda za ku iya gwada aikace-aikacen ku na samarwa tare da irin wannan maɓallin API, ta ƙara sabbin kirtani kafin a fitar da shi kai tsaye. Wannan zai hana kowa satar maɓallin API ɗinku na sirri, kuma yana iya hana cika aikin fassarar ku ta hanyar ƙara sabbin kirtani waɗanda ba su da alaƙa.
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!