ქვეყნებრივ სიდიდესთვის (i18n) საუკეთესო გადაწყვეტა Next.js აპლიკაციებისთვის
გსურთ თქვენი Next.js აპლიკაციის გაფართოება ახალ ბაზრებზე? TacoTranslate მნიშვნელოვნად აქும் თქვენი Next.js პროექტის ლოკალიზაციას, რაც საშუალებას გაძლევთ მიაღწიოთ გლობალურ აუდიტორიას უსიამოვნებების გარეშე.
რატომ აირჩიოთ TacoTranslate Next.js-სთვის?
- უსახლო ინტეგრაცია: სპეციალურად Next.js აპლიკაციებისთვის შექმნილი, TacoTranslate შეუფერხებლად ეფუძნება თქვენს არსებულ სამუშაო პროცესს.
- ავტომატური სტრიქონების შეგროვება: JSON ფაილების მენეჯმენტი ხელით აღარ გჭირდებათ. TacoTranslate ავტომატურად აშორებს სტრიქონებს თქვენს კოდების ბაზიდან.
- ხელოვნურ ინტელექტზე დაფუძნებული თარგმნები: გამოიყენეთ AI-ის შესაძლებლობები, რათა მიაწოდოთ კონტექსტუალურად ზუსტი თარგმანები, რომლებიც შეესაბამება თქვენს აპლიკაციის ტონს.
- მყისიერი ენის მხარდაჭერა: ახალი ენების მხარდაჭერის დამატება ერთი კლიკით, რაც თქვენს აპლიკაციას გლობალურად ხელმისაწვდომს ხდის.
როგორ მუშაობს
როგორც მსოფლიო უფრო გლობალიზებულია, ვებსაიტების შემქმნელებისთვის სულ უფრო მნიშვნელოვანი ხდება ისეთი აპლიკაციების შექმნა, რომლებიც სხვადასხვა ქვეყნებისა და კულტურების მომხმარებლებს დააკმაყოფილებს. ერთ-ერთი მთავარი გზაა ამ მიზნის მიღწევისთვის საერთაშორისოकरणი (i18n), რაც საშუალებას გაძლევთ მიამაგროთ თქვენი აპლიკაცია სხვადასხვა ენებს, ვალუტებს და თარიღის ფორმატებს.
ამ სახელმძღვანელოში ვიხილავთ, როგორ უნდა დაამატოთ საერთაშორისოकरणი თქვენს React Next.js აპლიკაციას, სერვერის მხარეს რენდერით. TL;DR: იხილეთ სრული მაგალითი აქ.
ეს სახელმძღვანელო მზადდება Next.js აპლიკაციებისთვის, რომლებიც იყენებენ Pages Router.
თუ იყენებთ App Router, გთხოვთ, გამოიყენოთ ეს სახელმძღვანელო.
ნაბიჯი 1: დააყენეთ i18n ბიბლიოთეკა
თქვენი Next.js აპლიკაციაში საერთაშორისო მხარდაჭერის (i18n) გააქტიურებისთვის, პირველ რიგში აირჩევთ i18n ბიბლიოთეკას. არსებობს რამდენიმე პოპულარული ბიბლიოთეკა, მათ შორის next-intl. თუმცა, ამ მაგალითში ჩვენ გამოვიყენებთ TacoTranslate.
TacoTranslate ავტომატურად თარგმნის თქვენი ტექსტებს ნებისმიერ ენაზე უახლესი AI ტექნოლოგიების გამოყენებით და გვაშორებს JSON ფაილების დამღლელ მართვას.
გაერთიანეთ იგი თქვენს ტერმინალში, გამოყენებით npm-ს:
npm install tacotranslate
ნაბიჯი 2: შექმენი უფასო 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
ნაბიჯი 3: 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
, გთხოვთ, შექმენით მათზე გაფართოებული განსაზღვრება ზედა თვისებებისა და კოდის გამოყენებით.
ნაბიჯი 4: სერვერის მხარის რენდერინგის იმპლემენტაცია
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
ფუნქციაშიDefaults-ურად არის ჩართული 60-ზე, რათა თქვენი თარგმნები მუდმივად განახლებული დარჩეს.
რომ გამოიყენოთ ერთი ან მეორე ფუნქცია გვერდზე, დავუშვათ, თქვენ გაქვთ გვერდი ასეთი ფაილით: /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!"/>
}
ნაბიჯი 5: განთავსება და ტესტირება!
ჩვენ დავასრულეთ! თქვენი Next.js აპლიკაცია ახლა ავტომატურად ითარგმნება, როდესაც დაემატება რაიმე სტრიქონი Translate
კომპონენტში. გაითვალისწინეთ, რომ ახალი სტრიქონების შესაქმნელად თარგმნაში მხოლოდ იმ გარემოებებს ექნებათ საშუალება, სადაც API გასაღებზე მოქმედებს read/write
დაშვები. ჩვენ გირჩევთ გქონდეთ დახურული და დაცული სტეიჯინგი გარემო, სადაც შეგიძლიათ მოინახულოთ თქვენი პროდაქშენის აპლიკაცია მსგავსი API გასაღებით, ახალი სტრიქონების დამატებით, სანამ პირდაპირი ცოცხალი რეჟიმში გადასვლით. ეს თავიდან აგარიდებთ თქვენს საიდუმლო API გასაღების მოპარვას და შესაძლებელია translation პროექტის გაბერას ახალი, არაზავშირებული სტრიქონების დამატებით.
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!