Како да се имплементира интернационализација во Next.js апликација која ја користи App Router
Направете ја вашата React апликација подостапна и допрете до нови пазари со интернационализација (i18n).
Како што светот станува се повеќе глобализиран, сè повеќе е важно за веб-развивачите да создаваат апликации кои можат да им одговорат на корисниците од различни земји и култури. Еден од клучните начини да се постигне ова е преку интернационализација (i18n), која ви овозможува да ја прилагодите вашата апликација на различни јазици, валути и формати на датуми.
Во овој напис, ќе истражиме како да додадете интернационализација во вашата React Next.js апликација, со серверско стране извршување. TL;DR: Погледнете го целосниот пример тука.
Овој водич е за Next.js апликации кои користат App Router.
Ако користите 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-то на вашиот веб-сајт. Прочитајте повеќе за origins тука.
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 го поддржува серверскиот рендеринг. Ова значително ја подобрува корисничката искуство со прикажување на преведената содржина веднаш, наместо прво да се појави краток сјај на непреведена содржина. Дополнително, можеме да прескокнеме мрежните барања на клиентот, бидејќи ние веќе ги имаме преводите кои ни се потребни за страницата што ја прегледува корисникот.
За поставување на серверска страна за рендерирање, креирајте или изменете го /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 клуч. Ако сме во локална, тест или стадиум средина (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);
}
Осигурајте се да го поставите matcher
во согласност со Next.js Middleware документацијата.
На клиентот, можете да го промените locale
колачињата за да ја промените преферираната јазична поставка на корисникот. Ве молиме видете целосниот примерок на код за идеи како да го направите ова!
Чекор 5: Постави и тествај!
Завршивме! Вашата React апликација сега ќе биде автоматски преведена кога ќе додадете било какви низи во Translate
компонентата. Имајте на ум дека само средините со read/write
дозволи за API клучот ќе можат да создаваат нови низи за превод. Препорачуваме да имате затворена и заштитена staging средина каде што можете да ја тестирате вашата продукциска апликација со таков API клуч, додавајќи нови низи пред да ја пуштите во живо. Ова ќе спречи било кој да ви го украде тајниот API клуч и потенцијално да го натрупа вашиот проект за превод со додавање нови, несоодветни низи.
Обавезно прегледајте го целосниот пример на нашиот GitHub профил. Таму, исто така, ќе најдете пример како да го направите тоа користејќи го Pages Router! Ако наидете на било какви проблеми, слободно контактирајте нѐ, и ќе бидеме повеќе од среќни да помогнеме.
TacoTranslate ви овозможува автоматски да ги локализирате вашите React апликации брзо на и од секој јазик. Започнете денес!