Next.js ilovalarida xalqarolashtirish (i18n) uchun eng yaxshi yechim
Siz Next.js ilovangizni yangi bozorga kengaytirmoqchimisiz? TacoTranslate sizning Next.js loyihangizni osonlik bilan mahalliylashtirish imkonini beradi va sizga global auditoriyaga hech qanday qiyinchiliklarsiz yetib borishga yordam beradi.
Nima uchun Next.js uchun TacoTranslate ni tanlash kerak?
- Moslashuvchan integratsiya: Maxsus Next.js ilovalari uchun yaratilgan TacoTranslate mavjud ish jarayoningizga osonlik bilan qo'shiladi.
- Avtomatik satr yigʻish: JSON fayllarni qoʻlda boshqarishni toʻxtating. TacoTranslate sizning kod bazangizdan satrlarni avtomatik ravishda yigʻib oladi.
- Sunʼiy intellekt yordamidagi tarjimalar: Ilovangiz ohangiga mos keladigan, kontekstga mos va aniq tarjimalarni taqdim etish uchun AI kuchidan foydalaning.
- Darhol til qoʻllab-quvvatlash: Yangi tillarni bir marta bosish bilan qoʻshing va ilovangizni global miqyosda kirish mumkin qiling.
Qanday ishlaydi
Dunyo tobora globalizatsiyalashib borar ekan, veb dasturchilar uchun turli mamlakatlar va madaniyatlardagi foydalanuvchilarga mos keladigan ilovalarni yaratish tobora muhimlashmoqda. Buni amalga oshirishning asosiy yo‘llaridan biri xalqarolashtirish (i18n) bo‘lib, u ilovangizni turli tillar, valyutalar va sana formatlariga moslashtirish imkonini beradi.
Ushbu darslikda React Next.js ilovangizga server tomonlama rendering bilan xalqarolashtirish qanday qo‘shilishini o‘rganamiz. TL;DR: To‘liq misolni shu yerdan ko‘ring.
Ushbu qo'llanma Pages Router dan foydalanuvchi Next.js ilovalari uchun mo'ljallangan.
Agar siz App Router dan foydalansangiz, iltimos, uning o'rniga ushbu qo'llanmani ko'rib chiqing.
1-qadam: i18n kutubxonasini o'rnating
Next.js ilovangizda xalqaro moslashuvni amalga oshirish uchun avvalo i18n kutubxonasini tanlaymiz. Mashhur kutubxonalar orasida next-intl mavjud. Ammo, ushbu misolda biz TacoTranslate dan foydalanamiz.
TacoTranslate ilg‘or sun’iy intellekt yordamida yozuvlaringizni avtomatik ravishda istalgan tilga tarjima qiladi va JSON fayllarini charchatuvchi boshqaruvdan sizni ozod qiladi.
Keling, uni terminalingizda npm yordamida o‘rnatamiz:
npm install tacotranslate
2-qadam: Bepul TacoTranslate hisobini yarating
Endi modul o‘rnatilgan bo‘lsa, TacoTranslate hisobingizni, tarjima loyihangizni va tegishli API kalitlarini yaratish vaqti keldi. Bu yerda hisob yaratishingiz mumkin. Bu bepul va kredit karta qo‘shishni talab qilmaydi.
TacoTranslate ilovasi foydalanuvchi interfeysida loyiha yarating va uning API kalitlari bo‘limiga o‘ting. Bitta read
kalit va bitta read/write
kalit yarating. Ularni atrof-muhit o‘zgaruvchilari sifatida saqlaymiz. read
kalitni biz public
deb ataymiz, read/write
kalit esa secret
hisoblanadi. Masalan, ularni loyihangiz ildizidagi .env
faylga qo‘shishingiz mumkin.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Sirli read/write
API kalitini mijoz tomoni ishlab chiqarish muhiti uchun hech qachon oshkor qilmasligingizga ishonch hosil qiling.
Shuningdek, ikki xil muhit o‘zgaruvchisini qo‘shamiz: TACOTRANSLATE_DEFAULT_LOCALE
va TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Sukut bo‘yicha orqaga qaytish uchun til kodi. Ushbu misolda, uni ingliz tili uchunen
ga o‘rnatamiz.TACOTRANSLATE_ORIGIN
: Sizning matnlaringiz saqlanadigan “papka”, masalan, veb-saytingiz URL manzili. Bu yerda originlar haqida ko‘proq o‘qing.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
3-qadam: TacoTranslate ni sozlash
TacoTranslate-ni ilovangizga integratsiya qilish uchun oldingi API kalitlaridan foydalanib mijoz yaratishingiz kerak bo‘ladi. Masalan, /tacotranslate-client.js
nomli fayl yarating.
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;
Biz tez orada TACOTRANSLATE_API_KEY
ni avtomatik ravishda belgilaymiz.
Clientni alohida faylda yaratish uni keyinchalik yana ishlatishni osonlashtiradi. Endi, maxsus /pages/_app.tsx
dan foydalangan holda, TacoTranslate
provayderini qo‘shamiz.
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>
);
}
Agar sizda allaqachon maxsus pageProps
va _app.tsx
mavjud bo'lsa, iltimos, yuqoridagi xususiyatlar va kod bilan ta’rifni kengaytiring.
4-qadam: Server tomonlama render qilishni amalga oshirish
TacoTranslate tarjimalaringizni server tomonida render qilish imkonini beradi. Bu foydalanuvchi tajribasini sezilarli darajada yaxshilaydi, chunki u birinchi navbatda tarjima qilinmagan kontentdan ko'ra, darhol tarjima qilingan mazmunni ko'rsatadi. Bundan tashqari, biz mijoz tomonidagi tarmoq so'rovlarini o'tkazib yuborishimiz mumkin, chunki bizda allaqachon kerakli barcha tarjimalar mavjud.
Boshlash uchun /next.config.js
faylini yaratamiz yoki o‘zgartiramiz.
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
tekshiruvini oʻz sozlamalaringizga moslang. Agar true
boʻlsa, TacoTranslate jamoat API kalitini koʻrsatadi. Agar biz mahalliy, test yoki staging muhitida boʻlsak (isProduction
is false
), yangi satrlar tarjimaga yuborilganligiga ishonch hosil qilish uchun maxfiy read/write
API kalitidan foydalanamiz.
Hozirgacha biz faqat Next.js ilovamizni qo'llab-quvvatlanadigan tillar ro'yxati bilan sozlaganmiz. Keyingi qiladigan ishimız — barcha sahifalaringiz uchun tarjimalarni olish. Buni amalga oshirish uchun talablaringizga qarab getTacoTranslateStaticProps
yoki getTacoTranslateServerSideProps
dan foydalanasiz.
Ushbu funksiyalar uchta argumentni oladi: biri Next.js Static Props Context obyekti, TacoTranslate sozlamalari va ixtiyoriy Next.js xususiyatlari. E'tibor bering, getTacoTranslateStaticProps
dagi revalidate
sukut bo'yicha 60 ga o'rnatilgan, shuning uchun tarjimalaringiz doimo yangilanib turadi.
Har qanday funksiyani sahifada ishlatish uchun, masalan, sizda /pages/hello-world.tsx
kabi sahifa fayli bor deb faraz qilaylik.
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!"/>;
}
Endi siz barcha React komponentlaringiz ichidagi satrlarni tarjima qilish uchun Translate
komponentidan foydalanishingiz mumkin.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
5-qadam: Joylashtiring va sinab ko'ring!
Ish tugadi! Endi sizning Next.js ilovangizda har qanday matnni Translate
komponentiga qo‘shganingizda avtomatik tarjima qilinadi. E'tibor bering, faqat API kalitida read/write
huquqlariga ega muhitlar yangi tarjima qilinadigan matnlarni yaratishi mumkin. Sizga ishlab chiqarish ilovangizni shunday API kalit bilan sinab ko‘rishingiz uchun yopiq va xavfsiz testing muhiti yaratishni tavsiya qilamiz, yangi matnlarni jonli ishga tushirishdan oldin qo‘shib borishingiz mumkin. Bu sizning maxfiy API kalitingizni o‘g‘irlashdan va tarjima loyihangizni yangi, aloqasi bo‘lmagan matnlar bilan orttirishning oldini oladi.
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!