Kijan pou aplike entènasyonalizasyon nan yon aplikasyon Next.js ki ap itilize App Router
Fè aplikasyon React ou pi aksesib epi rive nan nouvo mache atravè entènasyonalizasyon (i18n).
Pandan mond la ap vin pi globalize, li vin pi enpòtan pou devlopè entènèt yo bati aplikasyon ki kapab satisfè itilizatè ki soti nan diferan peyi ak kilti. Youn nan prensipal metòd pou reyalize sa se atravè entèwasyonalizasyon (i18n), ki pèmèt ou adapte aplikasyon w lan nan diferan lang, lajan, ak fòma dat.
Nan atik sa a, n ap eksplore kijan pou ajoute entèwasyonalizasyon nan aplikasyon React Next.js ou a, ak rann sou kote sèvè. TL;DR: Gade egzanp konplè a isit la.
Gid sa a se pou aplikasyon Next.js ki ap itilize App Router.
Si w ap itilize Pages Router, gade gid sa a olye.
Etap 1: Enstale yon bibliyotèk i18n
Pou aplike entènasyonalizasyon nan aplikasyon Next.js ou a, nou pral premye chwazi yon bibliyotèk i18n. Gen plizyè bibliyotèk popilè, enkli next-intl. Nan egzanp sa a, sepandan, n ap itilize TacoTranslate.
TacoTranslate otomatikman tradwi chèn ou yo nan nenpòt lang lè l sèvi avèk AI avanse, epi li libere ou kont jesyon fatigan fichye JSON yo.
Ann enstale l lè l sèvi avèk npm nan tèminal ou:
npm install tacotranslate
Etap 2: Kreye yon kont TacoTranslate gratis
Kounye a ke ou gen modil la enstale, li lè pou kreye kont TacoTranslate ou a, yon pwojè tradiksyon, ak kle API ki asosye yo. Kreye yon kont isit la. Li gratis, e pa mande ou ajoute yon kat kredi.
Nan koòdone aplikasyon TacoTranslate, kreye yon pwojè, epi ale nan tab kle API li yo. Kreye yon kle read
ak yon kle read/write
. Nou pral sove yo kòm varyab anviwònman. Kle read
la se sa nou rele public
epi kle read/write
la se secret
. Pa egzanp, ou ta kapab ajoute yo nan yon fichye .env
nan rasin pwojè ou.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Asire ou pa janm kite kle API sekrè read/write
la pèdi nan anviwònman pwodiksyon bò kliyan an.
N ap ajoute tou de lòt varyab anviwònman: TACOTRANSLATE_DEFAULT_LOCALE
ak TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Kòd lokal defo pou rezèv. Nan egzanp sa a, n ap mete li kòmen
pou lang angle.TACOTRANSLATE_ORIGIN
: “Katab” kote chenn ou yo pral estoke, tankou URL sit entènèt ou. Li plis sou orijin yo isit la.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Etap 3 : Konfigirasyon TacoTranslate
Pou entegre TacoTranslate ak aplikasyon ou a, ou pral bezwen kreye yon kliyan lè l sèvi avèk kle API yo soti pi bonè. Pa egzanp, kreye yon fichye ki rele /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;
N ap otomatikman defini TACOTRANSLATE_API_KEY
ak TACOTRANSLATE_PROJECT_LOCALE
byento.
Kreye kliyan an nan yon fichye apa fè li fasil pou itilize ankò pita. getLocales
se yon fonksyon itilite avèk kèk manyen erè entegre. Kounye a, kreye yon fichye ki rele /app/[locale]/tacotranslate.tsx
, kote n ap aplike founisè 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>
);
}
Remake 'use client';
ki endike ke sa a se yon konpozan kliyan.
Avèk founisè kontèks la pare kounye a, kreye yon dosye ki rele /app/[locale]/layout.tsx
, ki se plan rasin nan nan aplikasyon nou an. Remake byen ke chemen sa a gen yon dosye k ap itilize Dynamic Routes, kote [locale]
se paramèt dinamik la.
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>
);
}
Premye bagay pou sonje isit la se ke nou ap itilize paramèt Dynamic Route
nou an [locale]
pou chèche tradiksyon pou lang sa a. Anplis, generateStaticParams
ap asire tout kòd lang ou aktive pou pwojè ou a pre-rann.
Kounye a, ann konstwi premye paj nou an! Kreye yon fichye ki rele /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!" />
);
}
Remake varyab revalidate
la ki di Next.js pou l rebati paj la apre 60 segonn, epi kenbe tradiksyon ou yo ajou.
Etap 4: Aplike rann sèvè bò
TacoTranslate sipòte rann sou bò sèvè. Sa a amelyore eksperyans itilizatè a anpil pa montre kontni ki tradui imedyatman, olye pou gen yon briye kontni ki pa tradui an premye. Anplis de sa, nou ka sote demann rezo sou kliyan an, paske nou deja gen tradiksyon nou bezwen pou paj la itilizatè a ap gade.
Pou configuré rannman bò sèvè a, kreye oswa modifye /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};
};
Modifye tès isProduction
lan pou l adapte ak anviwònman ou. Si true
, TacoTranslate ap montre kle API piblik la. Si nou nan yon anviwònman lokal, tès, oswa staging (isProduction
is false
), nou pral itilize kle API sekrè read/write
pou asire nouvo chenn yo voye pou tradiksyon.
Pou asire w ke routaj ak redireksyon ap fonksyone jan yo espere a, nou pral bezwen kreye yon dosye ki rele /middleware.ts
. Lè l sèvi avèk Middleware, nou ka redireksyon itilizatè yo sou paj ki prezante nan lang yo prefere a.
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);
}
Asire ou mete kanpe matcher
an selon Dokiman Middleware Next.js.
Sou kliyan an, ou ka chanje locale
cookie a pou modifye lang itilizatè a prefere a. Tanpri gade egzanp kòd konplè a pou ide sou kijan pou fè sa!
Etap 5: Deploye epi teste!
Nou fini! Aplikasyon React ou a ap kounye a tradui otomatikman lè ou ajoute nenpòt chenn nan yon konpozan Translate
. Remake ke sèlman anviwònman ki gen pèmisyon read/write
sou kle API a ap kapab kreye nouvo chenn pou tradui. Nou rekòmande pou genyen yon anviwònman etapman fèmen ak sekirize kote ou ka teste aplikasyon pwodiksyon ou a avèk yon kle API konsa, ajoute nouvo chenn anvan ou pibliye. Sa ap anpeche nenpòt moun vòlò kle API sekrè ou, epi evite risk pou pwojè tradiksyon ou a vin gonfle avèk nouvo chenn ki pa gen rapò.
Asire w gade egzanp konplè a sou pwofil GitHub nou an. La a, w ap jwenn tou yon egzanp sou kijan pou fè sa ak Pages Router la! Si w rankontre nenpòt pwoblèm, pa ezite kontakte nou, epi n ap plis pase kontan ede w.
TacoTranslate pèmèt ou lokalize aplikasyon React ou yo otomatikman, rapidman nan nenpòt lang epi soti nan nenpòt lang. Kòmanse jodi a!