Kaip per 15 minučių pridėti i18n prie su Cursor sukurtos Next.js programėlės?

Įdiegiate vieną CLI, nusiunčiate Cursor vieną užklausą, ir jūsų Next.js projektas iš tik anglų kalba veikiančio JSX tampa veikiančia daugiakalbe programėle su [locale] maršrutizavimu, sugeneruotais raktais ir automatiniu sinchronizavimu po kiekvieno išsiuntimo. globalize.now yra AI grindžiama lokalizacijos infrastruktūra, atliekanti i18n darbą, kurį praleido Cursor: ištraukianti kietai įrašytas eilutes, generuojanti next-intl raktus ir lokalės failus bei sinchronizuojanti vertimus po kiekvieno Git išsiuntimo. Toliau pateiktame vadove daroma prielaida, kad naudojate standartinį App Router projektą. Bendras laikas mūsų bandomojoje saugykloje: 13 minučių 40 sekundžių.

Kas iš tikrųjų sugenda, kai Cursor kuria jūsų Next.js UI?

Cursor optimizuoja veikiančią UI, o ne architektūrą. Jis generuoja kodą pagal natūralia kalba pateiktas instrukcijas ir atnaujina kodo dalis naudodamas užklausas, todėl JSX parašomas taip, kaip žmogus greitai kurtų prototipą: tekstas įrašomas tiesiogiai, nėra raktų, lokalės failų ir [locale] segmento.

Įprastas Cursor sugeneruotas Next.js puslapis atrodo taip:

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Welcome to Acme</h1>
      <p>Get started in seconds.</p>
      <button>Sign up</button>
    </main>
  )
}

Viename puslapyje — trys kietai įrašytos eilutės. Tikroje programėlėje jų yra šimtai, išsibarsčiusių dešimtyse komponentų. Anksčiau Pages Router turėjo integruotą i18n konfigūraciją, tačiau atsiradus numatytajam App Router ji buvo pašalinta, todėl kūrėjams teko patiems sujungti tarpinę programinę įrangą, dinaminius maršruto segmentus ir išorinę biblioteką, pavyzdžiui, next-intl. Numatytoji Cursor elgsena nieko iš to neatlieka už jus.

Rezultatas — tas pats modelis, kurį aptarėme straipsnyje Kodėl jūsų Lovable programėlės vertimai sugenda kaskart išleidus naują versiją: kodų bazė auga, kietai įrašytų eilučių daugėja, o „kitą mėnesį pridėkime ispanų kalbą“ virsta kelių savaičių trukmės pertvarkymu.

Kaip nustatyti globalize.now Cursor projekte?

Prijunkite savo saugyklą prie globalize.now. Pirmoji konversija vykdoma vieną kartą, programėlėje: sistema nuskaito saugyklą, pakeičia kietai įrašytas eilutes raktais ir atidaro jūsų peržiūrai skirtą pull request. Po to kiekvienas išsiuntimas išverčia viską, kas nauja.

Jei norite pirmąjį etapą paleisti iš Cursor, įdiekite įgūdžius iš projekto šakninio katalogo:

npx skills add globalize-now/globalize-skills

CLI aptinka jūsų technologijų steką, parenka tinkamą Cursor išankstinį nustatymą ir įdiegia agento taisykles jūsų projekte. Next.js 16 App Router projekte rezultatas atrodo taip:

✓ Stack detected: Next.js 16 (App Router)
✓ Editor detected: Cursor
✓ Preset selected: globalize-guide + next-intl
✓ Installed 4 skill files to .cursor/rules/
Done in 1.2s

Įgūdžių failai yra šalia esamų Cursor taisyklių. Juose agentui nurodoma, kaip ištraukti eilutes, kaip generuoti su next-intl konvencijomis suderinamus raktus ir kaip prijungti [locale] maršruto segmentą. Niekas nepalieka jūsų kompiuterio. Jūsų kodas neįkeliamas.

Jei vietoj Cursor naudojate Claude Code arba Codex, CLI įdiegia lygiaverčius įgūdžių failus šiems įrankiams. Tolesnė eiga yra tokia pati.

Kaip agentas ištraukia kietai įrašytas eilutes iš Cursor kodų bazės?

Atidarykite Cursor agento skydelį ir nusiųskite vieną užklausą:

Set up i18n for this project. Use English, Spanish, German, and Arabic.

Agentas įkelia įdiegtas taisykles, nuskenuoja app/ ir components/ katalogus bei pateikia ataskaitą. 12 puslapių rinkodaros svetainėje ataskaita paprastai atrodo taip:

Detected Next.js 16 with App Router.
Found 47 hardcoded strings across 12 components.
Best fit: next-intl. RTL required for Arabic.

Plan:
- Install next-intl
- Move app/* into app/[locale]/*
- Generate i18n/request.ts and middleware.ts
- Extract 47 strings to messages/en.json
- Convert JSX to useTranslations / getTranslations calls

Proceed? (y/n)

Agentas atlieka tai, ką next-intl dokumentacijoje vadinama sudėtingiausia dalimi: tarpinę programinę įrangą, dinaminius maršruto segmentus, užklausų konfigūraciją ir kiekvieno komponento konvertavimą, kad būtų naudojami vertimo kabliukai. Peržiūrite planą ir jį patvirtinate. Agentas atlieka pakeitimus kaip vieną kelių failų redagavimą, kurį galite priimti arba atmesti Cursor skirtuke su pakeitimais.

Kaip generuojami next-intl raktai ir lokalės failai?

Patvirtinus planą, agentas sugeneruoja standartinę next-intl struktūrą. Saugykloje atsiranda keturi nauji dalykai:

i18n/
  request.ts
  routing.ts
middleware.ts
messages/
  en.json
  es.json
  de.json
  ar.json
app/
  [locale]/
    layout.tsx
    page.tsx
    ...

messages/en.json kataloge 47 ištrauktos eilutės tampa vardų sritimis suskirstytais raktais, sugrupuotais pagal komponentą arba maršrutą:

{
  "Home": {
    "heading": "Welcome to Acme",
    "lede": "Get started in seconds.",
    "signupCta": "Sign up"
  }
}

Originalus page.tsx perrašomas taip, kad kliento komponentuose naudotų useTranslations, o serverio komponentuose — getTranslations. Atskirimas vyksta automatiškai. Agentas patikrina, kuriuose komponentuose yra "use client" direktyva, ir parenka tinkamą kabliuką.

Ispanų, vokiečių ir arabų kalbų JSON failai sugeneruojami su pirminiais vertimais, atsižvelgiant į žodyną, kurį agentas sudaro pagal jūsų komponentų ir props pavadinimus. Prekės ženklų terminai paliekami anglų kalba. RTL palaikymas prijungiamas prie išdėstymo: dir atributas nustatomas pagal lokalę, o ten, kur agentas gali tai aptikti, fiksuotas kairės / dešinės pozicijas pakeičia CSS loginės savybės.

Tai tas pats visapusiškas modelis, kurį pritaikėme gamybinėje monorepozitorijoje straipsnyje Kas nutinka, kai AI agentas internacionalizuoja tikrą monorepozitoriją?. Vadovo formatas toks pats, skiriasi tik įvesties duomenys.

Kaip veikia sinchronizavimas po Git išsiuntimo po pirmojo paleidimo?

Pirmasis paleidimas atliekamas vieną kartą. Sinchronizavimas tęsiasi visada.

Agentui baigus darbą, prijunkite saugyklą prie globalize.now valdymo skydelyje. Nuo tada:

Push to main
   ↓
globalize.now diffs against last synced state
   ↓
New hardcoded strings get extracted + keyed
   ↓
Translations generated for every configured locale
   ↓
PR opened with locale file updates

Cursor neturi būti atidarytas. Claude Code neturi veikti. Sinchronizavimas vyksta Git lygmeniu, todėl veikia nepriklausomai nuo to, kuris įrankis sugeneravo kitą UI paketą. Kai kitą savaitę Cursor iš naujo sugeneruos komponentą ir pridės tris naujus mygtukus, jie kitame PR jau bus išversti.

Nereikia rankinio eksporto. Nėra peržiūros eilės. Nėra CSV pirmyn-atgal proceso. Produkto pažadas toks pats, kaip aprašyta straipsnyje Kaip internacionalizuoti programėlę naudojant globalize.now: nustatykite vieną kartą, o po kiekvieno išsiuntimo vykdykite automatinį sinchronizavimą.

O jei jau turite rankiniu būdu sukurtą next-intl konfigūraciją?

Agentas pirmiausia ją perskaito.

Jei egzistuoja i18n/request.ts, agentas perima jūsų konfigūraciją, o ne ją perrašo. Jei messages/en.json jau turi Pricing.heading, agentas pakartotinai naudoja šį raktą, o ne generuoja naują. Jei jūsų vardų sričių konvencija yra pricing.heading (mažosios raidės, taškais atskirtos), o ne Pricing.heading (PascalCase, įdėtinė), agentas ją atitinka.

Vienintelis dalykas, kurio agentas atsisakys, — tyliai perrašyti esamą lokalės failą. Jei įvyksta rakto kolizija, jis sustoja ir paklausia. Toks elgesys įrašytas į npx skills add globalize-now/globalize-skills įdiegtas įgūdžių taisykles — jums nereikia jo konfigūruoti.

Tuo pasirūpina globalize.now. Prijunkite savo Next.js saugyklą, ir konversija bus atlikta vieną kartą, programėlėje; npx skills add globalize-now/globalize-skills įgūdžiai apima tolesnį darbą jūsų redaktoriuje. Sužinokite, kaip tai veikia, apsilankę globalize.now.