Next.js програмд App Router ашиглан олон хэлний дэмжлэгийг хэрхэн хэрэгжүүлэх вэ
Таны React програмыг илүү хүртээмжтэй болгож, олон улсынжуулалтын (i18n) тусламжтайгаар шинэ зах зээлд хүрээрэй.
Дэлхий улам бүр глобалчлан хөгжиж байгаа тул вэб хөгжүүлэгчдэд өөр өөр улс орон, соёлын хэрэглэгчдэд зориулсан програм хангамж бүтээх нь улам чухал болж байна. Үүний гол арга замуудын нэг нь олон улсын хэрэглээний дэмжлэг (i18n) бөгөөд энэ нь таны програмыг олон хэл, валют, огнооны форматуудад нийцүүлэх боломжийг олгодог.
Энэхүү нийтлэлд бид React Next.js програмдаа олон улсын хэрэглээний дэмжлэгийг сервер талд рендерингтэй хэрхэн нэмэх талаар судална. TL;DR: Бүрэн жишээг эндээс үзнэ үү.
Энэхүү гарын авлага нь App Router ашиглаж буй Next.js програмын хувьд зориулагдсан.
Хэрэв та Pages Router ашиглаж байгаа бол, үүний оронд энэ гарын авлагыг үзнэ үү.
Алхам 1: i18n номын санг суулгана уу
Next.js аппликейшн дотроо олон улсын дэмжлэгийг хэрэгжүүлэхийн тулд эхлээд i18n номын санг сонгох хэрэгтэй. Олонд танигдсан хэд хэдэн номын санууд бий, тэдний дунд next-intl орно. Гэсэн хэдий ч, энэ жишээнд бид TacoTranslate ашиглах болно.
TacoTranslate найдвартай хиймэл оюун ухааны тусламжтай таны текстүүдийг хүссэн хэлэнд автоматаар орчуулж, JSON файлуудыг удирдах төвөгтэй ажлаас чөлөөлнө.
Тэгэхээр, таны терминал дээр npm ашиглан суулгана уу:
npm install tacotranslate
Алхам 2: Үнэгүй TacoTranslate акаунт үүсгээрэй
Одоо та модулийг суулгасан бол TacoTranslate данс, орчуулгын төсөл, холбогдох API түлхүүрүүдээ үүсгэх цаг болсон. Энд данс үүсгээрэй. Энэ үнэгүй бөгөөд кредит карт оруулах шаардлагагүй.
TacoTranslate програмын интерфэйс дотор төсөл үүсгэж, 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_IS_PRODUCTION === 'true'
? process.env.TACOTRANSLATE_PROJECT_LOCALE
: undefined,
});
module.exports = tacoTranslate;
Бид ойрын хугацаанд автоматжуулан TACOTRANSLATE_API_KEY
ба TACOTRANSLATE_PROJECT_LOCALE
-ыг тодорхойлно.
Клиентыг тусад нь файлд үүсгэх нь дараа дахин ашиглахад хялбар болгодог. getLocales
нь зөвхөн хэсэгтээ алдааг удирдах функц юм. Одоо /app/[locale]/tacotranslate.tsx
нэртэй файл үүсгэж, энд бид TacoTranslate
провайдерыг хэрэгжүүлнэ.
'use client';
import React, {type ReactNode} from 'react';
import {
type TranslationContextProperties,
TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslateClient}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}
'use client';
нь энэ нь клиентийн бүрэлдэхүүн хэсэг болохыг зааж байгааг анхаарна уу.
Одоо контекст хангагч бэлэн болсон тул, програмынхаа үндсэн зохион байгуулалтыг үүсгэхийн тулд /app/[locale]/layout.tsx
нэртэй файлыг бүтээнэ үү. Энэ зам нь Dynamic Routes ашигласан хавтасыг агуулж байгаа бөгөөд энд [locale]
нь динамик параметр юм гэдгийг анхаарна уу.
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';
export async function generateStaticParams() {
const locales = await tacoTranslateClient.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: Promise<{locale: Locale}>;
readonly children: ReactNode;
};
export default async function RootLayout({params, children}: RootLayoutParameters) {
const {locale} = await params;
const origin = process.env.TACOTRANSLATE_ORIGIN;
const localizations = await tacoTranslateClient.getLocalizations({
locale,
origins: [origin /* , other origins to fetch */],
});
return (
<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</TacoTranslate>
</body>
</html>
);
}
Энд хамгийн түрүүнд анхаарах зүйл бол бид өөрийн Dynamic Route
параметр [locale]
-г тухайн хэлэнд зориулсан орчуулгыг татахад ашиглаж байгаа явдал юм. Үүнээс гадна, generateStaticParams
таны төсөлд идэвхжүүлсэн бүх л дүрмийн кодуудыг урьдчилан үүсгэж байгааг баталгаажуулж байна.
Одоо, анхны хуудсаа бүтээе! /app/[locale]/page.tsx
нэртэй файлыг үүсгээрэй.
import React from 'react';
import {Translate} from 'tacotranslate/react';
export const revalidate = 60;
export default async function Page() {
return (
<Translate string="Hello, world!" />
);
}
revalidate
хувьсагчийг анхаарна уу, энэ нь Next.js-д хуудсыг 60 секундийн дараа дахин барьж, таны орчуулгуудыг шинэчилж байгааг хэлдэг.
4-р шат: Сервер талын рендерингийг хэрэгжүүлэх
TacoTranslate сервер талын рендерингийг дэмждэг. Энэ нь хэрэглэгчийн туршлагыг ихээр сайжруулдаг бөгөөд эхлээд орчуулга хийгдээгүй агуулга гэнэт гарч ирэхийн оронд шууд орчуулсан агуулгыг харуулдаг. Мөн хэрэглэгчийн талд сүлжээний хүсэлтүүдийг хасаж чадна, учир нь бид аль хэдийн хэрэглэгч харж буй хуудсанд шаардлагатай орчуулгуудтай болсон байдаг.
Server side rendering тохируулахын тулд /next.config.js
файлыг үүсгэх эсвэл засварлах хэрэгтэй:
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = await withTacoTranslate(
{},
{
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'),
}
);
// NOTE: Remove i18n from config when using the app router
return {...config, i18n: undefined};
};
Тохиргоондоо тааруулан isProduction
шалгалтыг өөрчилнө үү. Хэрэв true
бол, TacoTranslate олон нийтэд зориулсан API түлхүүрийг харуулна. Харин хэрэв бид локал, тест эсвэл staging орчинд байгаа бол (isProduction
is false
) нууц read/write
API түлхүүрийг ашиглан шинэ текстүүд орчуулгад илгээгдэж байгааг баталгаажуулна.
Маршрутизаци ба чиглүүлэлт зөв ажиллахын тулд /middleware.ts
нэртэй файлыг үүсгэх шаардлагатай. Middleware ашиглан хэрэглэгчдийг тэдний дуртай хэл дээр үзүүлж байгаа хуудсанд чиглүүлэх боломжтой.
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}
Заавал Next.js Middleware баримт бичигтэй нийцүүлэн matcher
тохируулсан байх ёстой.
Клиент дээр та хэрэглэгчийн дуртай хэлээр солихын тулд locale
cookie-г өөрчилж болно. Үүнийг хэрхэн хийх талаар санаа авахын тулд бүрэн жишээ кодыг үзнэ үү!
Алхам 5: Хайрцаглах ба турших!
Бид дууслаа! Таны React аппликейшн одоо ямар нэгэн тэмдэгтүүдийг 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 Pages 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!