Како да се имплементира интернационализација во 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-то на вашата веб-страница. Прочитајте повеќе за origin-ите тука.
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
, коренскиот layout во нашата апликација. Забележете дека овој пат користи папка со 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 клучот ќе можат да создаваат нови низи за превод. Препорачуваме да имате затворено и обезбедено стейџинг опкружување каде што може да ја тестирате вашата продукциска апликација со таков 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!