Mandag kveld norsk tid lanserte Vercel versjon 15 av Next.js, akkurat i tide til Next.js Conf som starter på torsdag.
Next.js 15 har vært ute i en "Release Candidate"-versjon siden mai, men nå er altså den første stabile versjonen tilgjengelig – og ifølge Vercel produksjonsklar.
Samtidig med Next.js 15-lanseringen annonserte Vercel også at Turbopack Dev er stabil, noe som betyr at Next.js 15-utviklere har fått en mye raskere lokal utviklingsserver basert på en Rust-basert bundler i stedet for Webpack.
Turbopack er en god nyhet for alle som irriterer seg over en litt treg lokal utviklingsserver, der for eksempel kodeendringer ikke vises kjapt nok i nettleseren:
- Opptil 76,7 prosent raskere lokal server-oppstart
- Opptil 96,3 prosent raskere Fast Refresh – tiden det tar fra du endrer noe i koden til det vises på skjermen (også kalt HMR – Hot Module Reloading)
- Opptil 45,8 prosent raskere førstegangs kompilering av en rute
React 19 i bunnen
Next.js har to filsystem-baserte måter å sette opp ruting på: Den ene (gamle) måten er basert på en pages-mappe (Pages Router), mens den nye bruker en app-mappe (App Router).
Men selv om den nye og anbefalte måten å sette opp ruting på er med App-ruteren, har Vercel valgt å beholde Pages-ruteren en stund til.
– I versjon 15 bruker App-ruteren React 19 RC, og vi har også introdusert bakoverkompatibilitet for React 18 med Pages-ruteren, basert på tilbakemeldinger, skriver Vercel i lanserings-bloggposten.
Vercel skriver at selv om React 19 ennå ikke er helt ferdig, så har de testet grundig og jobbet tett med React-teamet – noe som gjør at de er trygge på at det skal være stabilt.
– Vi har bestemt oss for å lansere Next.js 15 som stabil nå, så prosjektene dine er fullt ut forberedt når React 19 blir generelt tilgjengelig.
Fikk kritikk for caching
Da App-ruteren ble lansert, innførte Next.js en ganske "opinionated" måte å gjøre caching på. De valgte blant annet å utvide den globale fetch-funksjonen slik at du får automatisk caching. Fetch oppførte seg altså annerledes enn i et vanilla JS-prosjekt.
Dette fikk de kraftig kritikk for, blant annet fra den kjente utvikleren Kent C. Dodds:
– Å gjøre dette har negativ innvirkning på fremtiden til web-plattformen, og det betyr også at når du skal feilsøke hvorfor noe ikke virker, så må du lete gjennom ulike ressurser for å finne "Next.js-versjonen av fetch" vs "web-plattformens versjon av fetch".
Med Next.js 15 har de gjort helomvending, og i stedet for å måtte "opte ut" må du nå "opte inn" hvis du vil cache blant annet fetch-requests, GET route-handlers og Page-komponenter.
Du kan lese mer om hva dette betyr i praksis og hva du bør gjøre i ditt tilfelle her.
Eksperimentell React Compiler
React-teamet jobber for tiden med en løsning kalt React Compiler (tidligere "React Forget") som skal kunne analysere koden din og finne måter å optimalisere den på.
Next.js 15 har fått støtte for React Compiler, men du må skru den på selv i next.config.js-filen.
I praksis betyr det at du skal slippe å måtte bruke for eksempel useMemo og useCallback for å "memoize" kode for å unngå unødvendige rerendringer. React Compiler legger til slike optimaliseringer automagisk der det trengs.
Foreløpig er React Compiler kun tilgjengelig som en Babel-plugin, så Next.js-teamet advarer om at det å bruke den vil føre til en tregere utviklingsserver og lengre byggetid.
Masse annet nytt
Vi skal ikke gå inn på absolutt alt som er nytt i denne artikkelen, det kan du lese mer om i lanseringsbloggposten.
Noen ting er imidlertid verdt å nevne:
- Bedre feilmeldinger ved hydreringsfeil
- Indikator på skjermen som viser deg om den rendrede siden er statisk eller dynamisk
- En ny <Form>-komponent som utvider og forbedrer HTML <form>-elementet
- Bedre støtte for å hoste Next.js andre steder enn hos Vercel
- Forbedret sikkerhet for Server Actions
- ESLint 9-støtte
Automatisk oppdatering med codemods
Som alltid når det er nye hovedversjoner av et produkt, kan det være mange "breaking changes" og en del endringer som må gjøres for at alt skal fungere.
For å gjøre jobben enklere, har Vercel kommet med et forbedrert codemod-kommandolinjeverktøy:
npx @next/codemod@canary upgrade latestDette verktøyet skal hjelp deg med å oppgradere til nyeste versjon. Etter å ha kjørt kommandoen over vil du få hjelp med å oppdatere de nødvendige avhengighetene, du få se hvilke codemods som er tilgjengelig, og hjelp med å kjøre dem.
Next.js-teamet anbefaler at du bruker @canary-tagen når du kjører codemod-verktøyet ettersom de fortløpende vil gjøre forbedringer basert på tilbakemeldinger fra utviklere.
