په Next.js ایپسونو کې د نړیوال کیدو (i18n) لپاره غوره حل
ایا تاسو غواړئ خپل Next.js غوښتنلیک نوي بازارونو ته پراخه کړئ؟ TacoTranslate ستاسو لپاره دا خورا اسانه کوي چې خپل Next.js پروژه محلي کړئ، او پرته له کومې ستونزې نړیوال مخاطبین ته ورسیږئ.
ولې د Next.js لپاره TacoTranslate غوره کړئ؟
- بې خنډه یوځای کېدل: په ځانګړې توګه د Next.js غوښتنلیکونو لپاره ډیزاین شوی، TacoTranslate په آسانۍ سره ستاسو له موجوده کاري جریان سره یوځای کېږي.
- د ټکو اوتومات راټولونه: نور د JSON فایلونو لاس په لاس مدیریت ته اړتیا نشته. TacoTranslate په اوتومات ډول ستاسو د کود بیس څخه ټکي راټولوي.
- د AI ځواکمن ژباړې: د مصنوعي ځیرکتیا ځواک کاروي تر څو ستاسو د غوښتنلیک د لحن سره سم دقیقې او مفهوم لرونکې ژباړې وړاندې کړي.
- سمدستي د ژبې ملاتړ: یوازې په یوه کلیک سره نوې ژبې اضافه کړئ، خپل غوښتنلیک نړیوال لاسرسي وړ وګرځوئ.
څنګه کار کوي
لکه څنګه چې نړۍ لا زیاته نړیواله کیږي، نو د ویب پراختیا کونکو لپاره دا لا ډیر مهم کیږي چې داسې غوښتنلیکونه جوړ کړي چې د مختلفو هېوادونو او کلتورونو کاروونکو اړتیاوې پوره کړي. د دې ترلاسه کولو یوه مهمه لار د نړیوالولو (i18n) له لارې ده، چې تاسو ته اجازه درکوي خپل غوښتنلیک بېلابېلو ژبو، اسعارو، او نیټو فورمټونو ته د تطبیق وړ کړئ.
په دې ښوونیز کې، موږ به وپلټو چې څنګه د خپل React Next.js غوښتنلیک کې د سرور اړخ رینډرنګ سره نړیوالول اضافه کړو. TL;DR: دلته بشپړ مثال وګورئ.
دا لارښود د Next.js هغو غوښتنلیکونو لپاره دی چې د Pages Router کاروي.
که تاسو د App Router څخه استفاده کوئ، مهرباني وکړئ پر ځای یې دا لارښود وګورئ.
ګام ۱: د i18n کتابتون نصب کړئ
د خپل Next.js غوښتنلیک کې د نړیوالیدو د پلي کولو لپاره، لومړۍ به یوه i18n کتابتون وټاکو. څو مشهور کتابتونونه شته، چې پکې next-intl هم شامل دی. خو، په دې بېلګه کې به موږ د TacoTranslate کاروو.
TacoTranslate ستاسو ټکي په هرې ژبې په اوتومات ډول د پرمختللي AI په کارولو سره ژباړي، او تاسو یې له د JSON فایلونو ستومي کنټرول څخه خلاصوي.
راځئ چې دا په خپل ترمینل کې د npm په کارولو سره نصب کړو:
npm install tacotranslate
ګام ۲: وړیا TacoTranslate حساب جوړ کړئ
اوس چې تاسې ماډیول نصب کړی دی، وخت یې دی چې خپل TacoTranslate حساب جوړ کړئ، د ژباړې پروژه، او اړوند API کیلي جوړې کړئ. دلته حساب جوړ کړئ. دا وړیا دی، او تاسو ته اړتیا نشته چې کریډیټ کارت اضافه کړئ.
د TacoTranslate غوښتنلیک UI کې، یو پروژه جوړه کړئ، او د هغې د API کلیدونو ټب ته لاړ شئ. یو read
کلید جوړ کړئ، او یو read/write
کلید. موږ به دا د چاپیریال متغیرونو په توګه خوندي کړو. د read
کلید هغه څه دي چې موږ ورته public
وایو او د read/write
کلید secret
دی. د بېلګې په توګه، تاسو کولی شئ دا د خپل پروژې په اصلي فولډر کې په یو .env
فایل کې اضافه کړئ.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
ډاډ ترلاسه کړئ چې هیڅکله د پټ read/write
API کیلي د مراجعې اړخ تولیدي چاپیریالونو ته مه افشا کوئ.
موږ به دوه نور چاپیریالي متغیرونه هم اضافه کړو: TACOTRANSLATE_DEFAULT_LOCALE
او TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: د ډیفالټ بیک اپ ځایي کوډ. په دې مثال کې، موږ به دا د انګلیسي لپارهen
ته وټاکو.TACOTRANSLATE_ORIGIN
: هغه "فولډر" چیرې چې ستاسو تارونه به زیرمه شي، لکه ستاسو د ویب پاڼې URL. دلته د سرچینو په اړه نور ولولئ.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
ګام ۳: د TacoTranslate ترتیب کول
د TacoTranslate د خپلو غوښتنلیک سره د یو ځای کولو لپاره، تاسو اړتیا لرئ چې د API کیلي ګانو څخه چې مخکې مو جوړې کړې دي یو کلاینت جوړ کړئ. د بېلګې په توګه، یو فایل جوړ کړئ چې نوم یې /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;
موږ به ناببره توګه TACOTRANSLATE_API_KEY
ژر تر ژره تعریف کړو.
په جلا فایل کې کلاینت جوړول دا اسانه کوي چې وروسته بیا وکارول شي. اوس، د یو ګمرکي /pages/_app.tsx
کارولو سره، موږ به د 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>
);
}
که تاسو لا دمخه ځانګړي pageProps
او _app.tsx
لرئ، مهرباني وکړئ پورته ځانګړتیاوې او کود له مخې تعریف پراخ کړئ.
ګام ۴: د سرور اړخ رینډر کولو پلي کول
TacoTranslate ستاسو د ژباړو لپاره د سرور اړخ رینډرینګ اجازه ورکوي. دا د کارونکي تجربه په لویه کچه ښه کوي ځکه چې ژباړل شوی منځپانګه په سمدستي توګه ښودل کیږي، د دې پر ځای چې لومړی بې ژباړې منځپانګې یوه چټکه نمایشي وښودل شي. برسېره پر دې، موږ کولی شو د کلاینت په اړخ کې د شبکې غوښتنې له پامه وغورځوو، ځکه چې موږ لا له مخه ټولې اړینې ژباړې لرو.
موږ به د /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'),
});
};
د isProduction
چک د خپلو تنظیماتو سره سم بدل کړئ. که true
وي، TacoTranslate به د عامه API کیلي ښکاره کړي. که موږ په محلي، ازمایښتي، یا ستېجینګ چاپیریال کې یو (isProduction
is false
)، نو موږ به د پټ read/write
API کیلي وکاروو ترڅو ډاډ ترلاسه کړو چې نوې رشته ګانې د ژباړې لپاره واستول شي.
تر دې مهاله مو یوازې د Next.js غوښتنلیک د ملاتړ شویو ژبو لیست تنظیم کړی دی. راتلونکی څه چې موږ یې کوو د ټولو ستاسې پاڼو لپاره ژباړې ترلاسه کول دي. د دې لپاره، تاسو به د خپل اړتیاوو پراساس یا getTacoTranslateStaticProps
یا getTacoTranslateServerSideProps
وکاروئ.
دې فعالیتونو درې پارامېټرې اخلي: یو Next.js Static Props Context شی، د TacoTranslate ترتیب، او اختیاري Next.js ځانګړتیاوې. په دې یادونه وکړئ چې revalidate
په getTacoTranslateStaticProps
کې په ډیفالټ ډول ۶۰ ټاکل شوی دی، ترڅو ستاسو ژباړې تازه پاتې شي.
د دې دواړو فعالیتونو د استعمال لپاره په یوه پاڼه کې، فرض کړو تاسو داسې یوه پاڼه لرئ لکه /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!"/>;
}
تاسو باید اوس وتوانیږئ چې د Translate
کمپونینټ وکاروئ ترڅو د خپل ټولو React کمپونینټونو دننه تارونه وژباړئ.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
ګام ۵: خپور کړئ او ازموینه وکړئ!
موږ خلاص شو! ستاسو د Next.js غوښتنلیک به اوس په اوتومات ډول وژباړل شي کله چې تاسو کومې لړۍ د Translate
کمپونینټ ته اضافه کړئ. په یاد ولرئ چې یوازې هغه چاپیریالونه چې د API کیلي پر read/write
اجازه لري، نوي لړۍ جوړولی شي چې وژباړل شي. موږ وړاندیز کوو چې یو تړلي او خوندي سټیجینګ چاپیریال ولرئ چې هلته کولی شئ خپل تولیدي غوښتنلیک د داسې API کیلي سره آزمایښت کړئ، او مخکې له ژوندۍ کیدو نوي لړۍ اضافه کړئ. دا به له دې څخه مخنیوی وکړي چې څوک ستاسو پټ API کیلي غلا کړي، او ممکن ستاسو د ژباړې پروژې د غیر اړونده نوو لړیو په زیاتوالي سره ضخیمه کړي.
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!