Skip to main content

A Vercel csapata 2025 októberében adta ki a Next.js 16-ot, amely a cache-kezelést, a bundlert és a middleware architektúráját egyaránt átalakította. A Next.js 16 újdonságok három területen hoznak alapvető változást, és közvetlen hatással vannak a mindennapi frontend fejlesztésre.

Cache Components: a Next.js 16 újdonságok közül a legfontosabb

A korábbi Next.js verziókban a cache-elés implicit volt. Az App Router automatikusan eldöntötte, mi legyen statikus és mi dinamikus. Ez gyakran meglepetéseket okozott. A fejlesztők nem mindig értették, miért kapnak régi adatokat egy oldalon.

A Next.js 16-ban a cache-elés teljesen opt-in lett. A „use cache” direktíva segítségével oldalakat, komponenseket és függvényeket lehet explicit módon cache-elni. A fordító automatikusan generálja a cache-kulcsokat. Nincs többé rejtett viselkedés, amelyet debugolni kellene.

Ezzel a Partial Prerendering (PPR) története is teljessé vált. A PPR-t 2023-ban vezették be. Korábban egy URL vagy statikus volt, vagy dinamikus. A PPR lehetővé tette, hogy egy statikus oldal bizonyos részei dinamikusan renderelődjenek a Suspense segítségével. A Cache Components ezt a modellt teszi teljessé és éretté.

Az engedélyezéshez egyetlen konfigurációs sor szükséges a next.config.ts fájlban: a cacheComponents opciót kell true-ra állítani. A korábbi experimental.ppr flag megszűnt. Ez a megoldás sokkal átláthatóbb, mint az előző verziók automatikus cache-elése.

Az új cache API-k is figyelemre méltóak. Az updateTag() függvény azonnali frissítést biztosít Server Actions-ben. A felhasználó azonnal látja a saját módosításait. A revalidateTag() mostantól SWR-viselkedést kap egy cacheLife profil megadásával. A háttérben frissíti a tartalmat, miközben a régi verzió azonnal megjelenik. A refresh() pedig a nem cache-elt adatokat frissíti anélkül, hogy a cache-t érintené.

Turbopack lett az alapértelmezett bundler

A Turbopack elérte a stabil státuszt fejlesztésben és production buildekben egyaránt. Mostantól ez az alapértelmezett bundler minden új Next.js projektben. A számok magukért beszélnek: 2-5x gyorsabb production buildek és akár 10x gyorsabb Fast Refresh fejlesztés közben.

A Turbopack fájlrendszer-cache béta verzióban érhető el. A fordító a compiler-artifaktokat lemezre menti a futások között. Nagy projekteknél ez különösen hasznos, mert az újraindítás után nem kell mindent újra fordítani. Az engedélyezéshez az experimental.turbopackFileSystemCacheForDev opciót kell bekapcsolni a konfigurációban.

A Vercel belső alkalmazásai már mind Turbopackot használnak. A közösségben is gyorsan nő az adoptáció. A fejlesztési munkamenetek több mint 50 százaléka és a production buildek 20 százaléka már Turbopackon fut a Next.js 15.3 óta. Aki egyedi webpack-konfigurációval dolgozik, továbbra is használhatja a webpacket a –webpack kapcsolóval.

A React Compiler támogatás szintén stabil lett a 16-os verzióban. Automatikus memoizálást biztosít kézi kódváltoztatás nélkül. A reactCompiler opció kikerült az experimental blokkból, és közvetlenül a konfigurációban engedélyezhető. Ez a háttérben Babelt használja, ami némileg lassítja a buildeket, de cserébe kevesebb manuális optimalizálásra van szükség.

Proxy.ts és fejlesztői élmény javítások

A middleware.ts fájlt felváltotta a proxy.ts. Ez nem csupán átnevezés. A proxy.ts a Node.js futtatókörnyezetben fut, és egyértelművé teszi az alkalmazás hálózati határát. A middleware.ts továbbra is elérhető Edge runtime esetén, de deprecated státuszba került.

A migrálás egyszerű. Át kell nevezni a fájlt middleware.ts-ről proxy.ts-re. Az exportált függvényt middleware-ről proxy-ra kell cserélni. A logika változatlan marad. Ez a változás tisztább elválasztást biztosít a routing és a hálózati réteg között.

A fejlesztői naplózás is javult. Fejlesztés közben a request logok mostantól mutatják, hol telik az idő. Külön látható a fordítás, a routing és a renderelés ideje. A build kimenet is részletesebb lett. Minden lépés mellett megjelenik az eltelt idő, ami megkönnyíti a szűk keresztmetszetek azonosítását.

A Next.js 16 a React 19.2-t használja. Ez három fontos új funkciót hoz. A View Transitions animált oldalváltásokat tesz lehetővé natívan. A useEffectEvent kiemeli a nem-reaktív logikát az Effectekből. Az Activity komponens pedig a háttérben futó UI állapotát őrzi meg display: none mellett is. Ezek a funkciók a frontend fejlesztés új lehetőségeit nyitják meg.

A Next.js 16 egy érett, átgondolt kiadás. A Cache Components átláthatóbbá teszi a cache-elést. A Turbopack mérhető teljesítménynövekedést ad. A proxy.ts tisztább architektúrát jelent. Ha frissítésre készülsz, a hivatalos upgrade guide és az npx @next/codemod upgrade parancs a legjobb kiindulópont. A legfrissebb stabil verzió a v16.2.1, amely 2026 márciusában jelent meg hibajavításokkal.

Humli Miklós

Több mint 15 éve dolgozom a digitális termékfejlesztés világában, elsősorban webdesign, frontend, backend és WordPress fejlesztés területén. Tapasztalataimat kis- és nagyvállalati projekteken, valamint szabadúszóként és csapatvezetőként szereztem.

Humli Miklós | Blog
Adatvédelmi áttekintés

Ez a weboldal sütiket használ, hogy a lehető legjobb felhasználói élményt nyújthassuk. A cookie-k információit tárolja a böngészőjében, és olyan funkciókat lát el, mint a felismerés, amikor visszatér a weboldalunkra, és segítjük a csapatunkat abban, hogy megértsék, hogy a weboldal mely részei érdekesek és hasznosak.