Next.js i18n: teksti, kurus jūsu t() izsaukumi nesasniedz

Ja jūsu Next.js lietotne ir iztulkota, bet pārlūka cilne, 404 lapa, formu kļūdas un saites priekšskatījums joprojām ir angļu valodā, cēlonis gandrīz vienmēr ir viens un tas pats: šie teksti tiek veidoti ārpus komponentes, tāpēc useTranslations izsaukums tos nekad nav skāris. globalize.now ir ar mākslīgo intelektu darbināta lokalizācijas infrastruktūra, un tieši šo slāni mēs redzam kā uz pusi padarītu, kad AI aģents pievieno i18n App Router projektam: redzamā lapa ir pārveidota, bet pārējā virsma — nē.

Zemāk parādīts, kur katrs no šiem tekstiem atrodas un kurš next-intl izsaukums ar to tiek galā. Visi piemēri atbilst pašreizējai next-intl dokumentācijai, kas iegūta 2026-10-28.

Kur App Router lietotnē slēpjas netulkotie teksti?

Tie slēpjas sešās vietās, kas nav React komponentes, kuras renderē tekstu. Kodēšanas aģents, kas pievieno i18n, apstrādājot jūsu komponentes, pārveidos redzamo UI un paies tiem garām:

1. Lapu virsraksti un apraksti failā generateMetadata.
2. Validācijas kļūdas un rezultātu ziņojumi Server Actions.
3. not-found.tsx — 404 lapa.
4. error.tsx — izpildlaika kļūdu lapa.
5. Ģenerēti faili, piemēram, opengraph-image.tsx, manifest.ts un sitemap.ts.
6. Route Handlers, kas atgriež tekstu.

Kopīgais ir tas, ka neviens no tiem netiek renderēts jūsu [locale] izkārtojuma kokā ierastajā veidā, tāpēc locale tiem ir jānodod vai jānolasa citādi. Next.js 16 maršrutēšanas ieraksts aptver maršrutēšanas pieslēgšanu; šis ieraksts ir par to, ko šī pieslēgšana neaizsniedz.

Kā iztulkot lapu virsrakstus un aprakstus?

Izsauciet getTranslations no next-intl/server funkcijas generateMetadata iekšienē. Funkciju var eksportēt no lapas vai izkārtojuma, un tā ir asinhrona, tāpēc pareizais ir gaidāmais (awaitable) API:

// app/[locale]/page.tsx
import {getTranslations} from 'next-intl/server';

export async function generateMetadata() {
  const t = await getTranslations('Metadata');
  return {title: t('title'), description: t('description')};
}

Kļūme ir statiskā forma. Aģenti bieži raksta export const metadata = {title: 'Dashboard'}, jo tas ir īsāk, bet konstante nevar izsaukt tulkošanas funkciju. Pārveidojiet to funkcijas formā un pievienojiet tās pašas atslēgas katalogam visām lokalizācijām. Šis ir arī meklētājprogrammām redzamais teksts, tāpēc lietotnes tulkošana bez metadatu tulkošanas reitingiem palīdz maz.

Kā iztulkot Server Action un validācijas ziņojumus?

Nododiet locale darbībai un izsauciet getTranslations gan ar nosaukumvietu, gan ar šo locale. Server Action nezina, kādā valodā ir lapa, tāpēc next-intl dokumentācija prasa to norādīt, piemēram, kā argumentu:

'use server';
import {getTranslations} from 'next-intl/server';

export async function subscribe(locale: string, formData: FormData) {
  const t = await getTranslations({locale, namespace: 'Subscribe'});
  // ...validate, then return t('success') or t('invalidEmail')
}

Viens brīdinājums no tās pašas dokumentācijas: padomājiet, kas notiek, ja apmeklētājs var pārslēgt valodu, kamēr ekrānā ir darbības ziņojums. Ja URL ir [locale] segments, tas tiek apstrādāts automātiski, jo maršruts mainās. Bez tā ziņojumu var būt vērts notīrīt pašam, piemēram, piešķirot komponentei key={locale}, lai tās stāvoklis tiktu atiestatīts.

Formu validācijai ar Zod dokumentētā pieeja ir kļūdu karte. Zod pieņem vienu katram safeParse izsaukumam, un karte var izsaukt getTranslations. Ievietojiet to vienā asinhronā palīgfunkcijā un nododiet tās rezultātu kā error opciju katrā parsēšanā. Tad jūsu shēmās ir noteikumi, nevis angļu teikumi, un AI ģenerētās formas vairs nenogādā "Invalid email" latviešu valodas lapā.

Kā iztulkot 404 un kļūdu lapas?

Ievietojiet not-found.tsx iekš app/[locale]/ un pēc tam pievienojiet catch-all maršrutu, lai tas patiešām tiktu aktivizēts. Next.js renderē šo failu, kad segments izsauc notFound(), bet nezināms URL pats to neizsauc:

// app/[locale]/[...rest]/page.tsx
import {notFound} from 'next/navigation';

export default function CatchAllPage() {
  notFound();
}

Pieprasījumiem, kurus next-intl middleware neatpazīst, locale nav vispār, tāpēc [locale] 404 uz tiem nekad neattiecas. Dokumentācijas atbilde ir app/global-not-found.tsx, ko Next.js dokumentācijā raksturo kā eksperimentālu un kas renderē savus html un body. Nezināmai [locale] vērtībai dokumentācija iesaka izsaukt notFound(), parasti i18n/request.ts.

error.tsx ir citādāks. Next.js prasa, lai tas būtu Client Component, un tas tiek renderēts zem jūsu izkārtojuma, tāpēc tam vajadzīgs NextIntlClientProvider ar vismaz Error nosaukumvietu. Nododiet tikai šos ziņojumus, nevis visu katalogu:

// app/[locale]/layout.tsx (excerpt)
const messages = await getMessages();
// ...
<NextIntlClientProvider locale={locale} messages={pick(messages, 'Error')}>

Tad useTranslations('Error') darbojas error.tsx iekšienē. Lapa neaptver global-error, tāpēc, ja tāds jums ir, pārbaudiet šo failu pats.

Kā ar kopīgošanas attēliem, manifest un sitemap?

Katram no tiem locale jānorāda skaidri, jo tie atrodas ārpus izkārtojuma koka. Attiecībā uz opengraph-image.tsx nolasiet locale no params un izsauciet getTranslations({locale, namespace}). Ja localePrefix ir pielāgots, dokumentācija brīdina, ka ģenerētais maršruts var kļūt nepieejams, jo Next.js neredz proxy (middleware) pārrakstīšanas; risinājums ir panākt, lai matcher izlaistu ceļus, kas beidzas ar opengraph-image.

app/manifest.ts atrodas ārpus [locale], tāpēc next-intl nevar noteikt lokalizāciju no ceļa. Izvēlieties reprezentatīvu lokalizāciju, parasti noklusējuma, un nododiet to skaidri. Attiecībā uz sitemap.ts pievienojiet alternates.languages ierakstus un veidojiet katru URL ar asinhrono getPathname({locale, href}) no sava navigācijas moduļa, pievienojot priekšā resursdatora adresi. next-intl pēc noklusējuma nosūta arī link atbildes galveni, kas norāda valodu versijas; sitemap ir izvēle, ja nepieciešama kontrole pār CMS vadītiem slug.

Kā rīkoties ar Route Handlers?

Ņemiet lokalizāciju no meklēšanas parametra, segmenta vai accept-language galvenes, validējiet to ar hasLocale(routing.locales, locale) un, ja tā neizturēja pārbaudi, atgrieziet 400. Pēc tam izsauciet getTranslations({locale, namespace}). Ja validāciju izlaižat, patvaļīga virkne nonāk līdz jūsu kataloga meklēšanai.

Kā atrast angļu valodas tekstus, ko jūsu aģents ir atstājis neiztulkotus?

Palaidiet šīs komandas projekta saknē. Tās ir tīši aptuvenas; mērķis ir saraksts, ko izlasīt, nevis vērtējums.

# 1. Static metadata that cannot be translated
grep -rn "export const metadata" app

# 2. Titles and descriptions already in generateMetadata
grep -rn "title:" app --include=page.tsx --include=layout.tsx

# 3. Server Actions with literal return messages
grep -rln "use server" app src 2>/dev/null | xargs grep -n "message:\|error:"

# 4. Zod schemas with inline messages
grep -rn "message:\s*['\"]" app src 2>/dev/null

# 5. 404 and error files, and whether a catch-all exists
ls app/\[locale\]/not-found.tsx app/\[locale\]/error.tsx "app/[locale]/[...rest]/page.tsx" 2>&1

Viss, kas pirmajos četros rezultātos ir parasts angļu valodas teksts, pieder katalogā. Kāpēc aģenti turpina pievienot cieti iekodētas virknes izskaidro, kāpēc tas atkārtojas: aģents seko redzamajam paraugam, un redzamais paraugs ir komponente. Ja izmantojat Copilot, Copilot instrukciju failu ierobežojumi attiecas arī uz šo gadījumu.

Ko tas maina jūsu katalogā?

Tas pievieno atslēgas, un tieši ar atslēgām sākas izkļūšana no sinhronizācijas. Katrs iepriekš minētais punkts katalogā ievelk jaunus ierakstus, piemēram, Metadata, Error, Subscribe un validācijas ziņojumus, un katram vajadzīgs tulkojums visās jūsu izlaistajās lokalizācijās. Projekts, kas komponentes iztulko vienreiz un vēlāk pievieno Server Action vai jaunu lapas virsrakstu, ir tas pats projekts, kas aprakstīts rakstā kāpēc tulkojumu faili noiet no sinhronizācijas.

next-intl izpildlaikā piegādā tulkojumus, un mēs to neaizstājam. globalize.now atrodas vienu slāni augstāk: jūs pieslēdzat repozitoriju lietotnē, koda bāze vienreiz tiek pārveidota katalogā, un push darbi pēc tam iztulko jaunās kataloga vienības, tiklīdz tās parādās, un piegādā tās kā izmaiņas, ko pārskatāt. Next.js integrācija apraksta iestatīšanu, bet kam mēs pieskaramies un kam nepieskaramies esošā i18n iestatījumā aplūko gadījumu, kad next-intl jau ir pieslēgts ar rokām.

No kā sākt

Palaidiet piecas grep komandas, pārveidojiet jebkuru statisko metadata eksportu, pievienojiet catch-all maršrutu un piešķiriet error.tsx tā provideri. Pēc tam pārbaudiet katalogu, vai visās lokalizācijās ir jaunās nosaukumvietas. Ja esat izlaidis ar AI veidotu lietotni un vēlaties, lai pārveidošanu un tulkošanu veic kāds cits, nevis uzturat to paši, vibe coders lapa ir pārskats, izstrādātāju atsauce aptver aģentu iestatījumus, bet cenas ir atsevišķā lapā.