Kuidas lisada Cursoriga loodud Next.js-i rakendusele i18n 15 minutiga?

Installite ühe CLI, saadate Cursorile ühe prompt’i ja teie Next.js-i projekt muutub ainult ingliskeelsest JSX-ist toimivaks mitmekeelseks rakenduseks, millel on [locale]-i marsruutimine, genereeritud võtmed ja automaatne sünkroonimine iga push’i järel. globalize.now on AI-põhine lokaliseerimistaristu, mis teeb ära i18n-töö, mille Cursor vahele jättis: ekstraheerib hardcoded string’id, genereerib next-intl võtmed ja lokaalifailid ning hoiab tõlked iga Git push’i järel sünkroonis. Allolev juhend eeldab standardset App Routeri projekti. Meie testhoidlas kulus algusest lõpuni 13 minutit ja 40 sekundit.

Mis on tegelikult katki, kui Cursor teie Next.js-i kasutajaliidese loob?

Cursor optimeerib toimiva kasutajaliidese, mitte arhitektuuri jaoks. See genereerib koodi loomulikus keeles antud juhiste põhjal ja muudab prompt’ide kaudu koodiosi, mistõttu kirjutatakse JSX nii, nagu inimene kirjutaks kiire prototüübi: tekst otse koodis, võtmed puuduvad, lokaalifailid puuduvad, [locale]-segment puudub.

Tüüpiline Cursoriga genereeritud Next.js-i leht näeb välja selline:

// 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>
  )
}

Ühel lehel on kolm hardcoded string’i. Päris rakenduses on neid kümnete komponentide peale sadu. Pages Routeriga tuli varem kaasa sisseehitatud i18n-konfiguratsioon, kuid App Routeri vaikevalikuks saamisel eemaldati see ning arendajad peavad nüüd ise ühendama middleware’i, dünaamilised marsruudisegmendid ja välise teegi, näiteks next-intl-i. Cursori vaikekäitumine ei tee sellest teie eest midagi.

Tulemuseks on muster, mida käsitlesime artiklis Miks teie Lovable’i rakenduse tõlked iga väljalaskega katki lähevad: koodibaas kasvab, hardcoded string’id kuhjuvad ja „lisame järgmisel kuul hispaania keele“ muutub mitmenädalaseks ümbertegemiseks.

Kuidas seadistada globalize.now Cursori projektis?

Ühendage oma hoidla globalize.now-ga. Esimene teisendus käivitatakse rakenduses ühe korra: see loeb hoidla läbi, asendab hardcoded string’id võtmetega ja avab ülevaatamiseks pull request’i. Iga järgnev push tõlgib kõik uue.

Kui soovite esimese läbimise käivitada hoopis Cursorist, installige oskused projekti juurkaustast:

npx skills add globalize-now/globalize-skills

CLI tuvastab teie tehnoloogiapinu, valib Cursorile sobiva preset’i ja installib agendi reeglid teie projekti. Next.js 16 App Routeri projektis näeb väljund välja selline:

✓ 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

Oskusfailid asuvad teie olemasolevate Cursori reeglite kõrval. Need ütlevad Cursori agendile, kuidas string’e ekstraheerida, kuidas genereerida next-intl konventsioonidega kooskõlas olevaid võtmeid ja kuidas ühendada [locale] marsruudisegment. Midagi ei lahku teie arvutist. Teie koodi ei laadita üles.

Kui kasutate Cursori asemel Claude Code’i või Codexit, installib CLI nende tööriistade jaoks samaväärsed oskusfailid. Edasine töövoog on identne.

Kuidas ekstraheerib agent Cursori koodibaasist hardcoded string’id?

Avage Cursori agendipaneel ja saatke üks prompt:

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

Agent laadib installitud reeglid, skannib app/ ja components/ katalooge ning annab teile tulemuse. 12-leheküljelise turundussaidi puhul näeb raport tavaliselt välja selline:

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)

Agent teeb seda, mida next-intl dokumentatsioon nimetab valusaks osaks: middleware, dünaamilised marsruudisegmendid, päringu konfiguratsioon ja komponentide kaupa teisendamine, et kasutada tõlkehook’e. Vaatate plaani üle ja kinnitate selle. Agent teeb muudatused ühe mitme faili muudatusena, mille saate Cursori diff-vaates vastu võtta või tagasi lükata.

Kuidas genereerib see next-intl-i võtmed ja lokaalifailid?

Pärast plaani kinnitamist genereerib agent standardse next-intl paigutuse. Hoidlasse lisandub neli uut asja:

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 sees muutuvad 47 ekstraheeritud string’i komponendi või marsruudi järgi rühmitatud nimeruumiga võtmeteks:

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

Algne page.tsx kirjutatakse ümber nii, et kliendikomponendid kasutavad useTranslations ja serverikomponendid getTranslations. Jaotus toimub automaatselt. Agent tuvastab, millistel komponentidel on "use client" direktiiv, ja valib õige hook’i.

Hispaania-, saksa- ja araabiakeelsed JSON-failid genereeritakse esimese ringi tõlgetega, mis järgivad agendi komponendi- ja prop-nimede põhjal koostatud sõnastikku. Bränditerminid jäävad inglise keelde. RTL-tugi ühendatakse paigutusega: dir atribuut määratakse lokaali põhjal ning CSS-i loogilised omadused asendavad fikseeritud vasak-/parempoolsed utiliidid seal, kus agent need tuvastab.

See on sama otsast lõpuni töövoog, mida kasutasime tootmise monorepos artiklis Mis juhtub, kui AI-agent rahvusvahelistab päris monorepo?. Juhendi vorm on sama, sisendid on erinevad.

Kuidas töötab Git push’i järgne sünkroonimine pärast esimest käivitust?

Esimene käivitus toimub ühe korra. Sünkroonimine kestab igavesti.

Kui agent on lõpetanud, ühendate hoidla juhtpaneelil globalize.now-ga. Sellest hetkest alates:

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 ei pea olema avatud. Claude Code ei pea töötama. Sünkroonimine toimub Git-kihis, seega töötab see olenemata sellest, milline tööriist järgmise kasutajaliidese partii kirjutas. Kui Cursor genereerib järgmisel nädalal komponendi uuesti ja lisab kolm uut nuppu, jõuavad need nupud järgmisse PR-i juba tõlgituna.

Käsitsi eksporti pole. Ülevaatusjärjekorda pole. CSV-ga edasi-tagasi liikumist pole. Tootelubadus on sama, mille dokumenteerisime artiklis Kuidas globalize.now abil oma rakendus globaalseks muuta: seadistage üks kord ja sünkroonige automaatselt iga push’i järel.

Mis siis, kui teil on next-intl juba käsitsi seadistatud?

Agent loeb selle kõigepealt läbi.

Kui i18n/request.ts on olemas, võtab agent teie konfiguratsiooni üle ega kirjuta seda üle. Kui messages/en.json sisaldab juba Pricing.heading, kasutab agent seda võtit uue genereerimise asemel. Kui teie nimeruumi konventsioon on pricing.heading (väiketähed, punktidega) mitte Pricing.heading (PascalCase, pesastatud), järgib agent seda.

Ainus asi, mida agent keeldub tegemast, on olemasoleva lokaalifaili vaikne ülekirjutamine. Kui võtmed põrkuvad, peatub agent ja küsib üle. See käitumine on kodeeritud npx skills add globalize-now/globalize-skills installitud oskusereeglitesse, mitte miski, mida peate eraldi seadistama.

globalize.now hoolitseb selle eest. Ühendage oma Next.js-i hoidla ja teisendus käivitatakse rakenduses ühe korra; npx skills add globalize-now/globalize-skills oskused katavad sellele järgneva töö teie redaktoris. Vaadake, kuidas see töötab: globalize.now.