


























Next.js 14.2 includes development, production, and caching improvements.
next dev --turbo.staleTimes.Upgrade today or get started with:
Over the past few months, we’ve been working on improving local development performance with Turbopack. In version 14.2, the Turbopack Release Candidate is now available for local development:
npm packages used in Next.js applications can compile with Turbopack.We’ve been extensively dogfooding Turbopack with Vercel’s applications. For example, with vercel.com, a large Next.js app, we've seen:
Turbopack continues to be opt-in and you can try it out with:
We will now be focusing on improving memory usage, implementing persistent caching, and next build --turbo.
next build - While Turbopack is not available for builds yet, 74.7% of tests are already passing. You can follow the progress at areweturboyet.com/build.To see a list of supported and unsupported features in Turbopack, please refer to our documentation.
In addition to bundling improvements with Turbopack, we’ve worked to improve overall build and production performance for all Next.js applications (both Pages and App Router).
We identified an optimization for the boundary between Server and Client Components that allows for tree-shaking unused exports. For example, importing a single Icon component from a file that has "use client" no longer includes all the other icons from that package. This can largely reduce the production JavaScript bundle size.
Testing this optimization on a popular library like react-aria-components reduced the final bundle size by -51.3%.
Note: This optimization does not currently work with barrel files. In the meantime, you can use the
optimizePackageImportsconfig option:
For extremely large-scale Next.js applications, we noticed out-of-memory crashes (OOMs) during production builds. After investigating user reports and reproductions, we identified the root issue was over-bundling and minification (Next.js created fewer, larger JavaScript files with duplication). We’ve refactored the bundling logic and optimized the compiler for these cases.
Our early tests show that on a minimal Next.js app, memory usage and cache file size decreased from 2.2GB to under 190MB on average.
To make it easier to debug memory performance, we’ve introduced a --experimental-debug-memory-usage flag to next build. Learn more in our documentation.
We updated how CSS is optimized during production Next.js builds by chunking CSS to avoid conflicting styles when you navigate between pages.
The order and merging of CSS chunks are now defined by the import order. For example, base-button.module.css will be ordered before page.module.css:
To maintain the correct CSS order, we recommend:
We don’t expect this change to negatively impact the majority of applications. However, if you see any unexpected styles when upgrading, please review your CSS import order as per the recommendations in our documentation.
Caching is a critical part of building fast and reliable web applications. When performing mutations, both users and developers expect the cache to be updated to reflect the latest changes. We've been exploring how to improve the Next.js caching experience in the App Router.
staleTimes (Experimental)The Client-side Router Cache is a caching layer designed to provide a fast navigation experience by caching visited and prefetched routes on the client.
Based on community feedback, we’ve added an experimental staleTimes option to allow the client-side router cache invalidation period to be configured.
By default, prefetched routes (using the <Link> component without the prefetch prop) will be cached for 30 seconds, and if the prefetch prop is set to true, 5 minutes. You can overwrite these default values by defining custom revalidation times in next.config.js:
staleTimes aims to improve the current experience of users who want more control over caching heuristics, but it is not intended to be the complete solution. In upcoming releases, we will focus on improving the overall caching semantics and providing more flexible solutions.
Learn more about staleTimes in our documentation.
We are continuing to iterate on on Parallel and Intercepting Routes, now improving the integration with the Client-side Router Cache.
revalidatePath or revalidateTag will revalidate the cache and refresh the visible slots while maintaining the user’s current view.router.refresh now correctly refreshes visible slots, maintaining the current view.In version 14.1, we started working on improving the readability of error messages and stack traces when running next dev. This work has continued into 14.2 to now include better error messages, overlay design improvements for both App Router and Pages Router, light and dark mode support, and clearer dev and build logs.
For example, React Hydration errors are a common source of confusion in our community. While we made improvements to help users pinpoint the source of hydration mismatches (see below), we're working with the React team to improve the underlying error messages and show the file name where the error occurred.
Before:

After:

In February, the React team announced the upcoming release of React 19. To prepare for React 19, we're working on integrating the latest features and improvements into Next.js, and plan on releasing a major version to orchestrate these changes.
New features like Actions and their related hooks, which have been available within Next.js from the React canary channel, will now all be available for all React applications (including client-only applications). We're excited to see wider adoption of these features in the React ecosystem.
instrumentation.ts (PR)overrideSrc prop for next/image (PR).revalidateReason argument to getStaticProps (PR).useSelectedLayoutSegment compatible with the Pages Router (PR).metadataBase warnings when absolute URLs don’t need to be resolved (PR).next/dynamic (PR).unoptimized prop (PR).images.loaderFile doesn't export a default function (PR)Next.js now has over 1 million monthly active developers. We're grateful for the community's support and contributions. Join the conversation on GitHub Discussions, Reddit, and Discord.
Next.js is the result of the combined work of over 3,000 individual developers, industry partners like Google and Meta, and our core team at Vercel. This release was brought to you by:
Huge thanks to @taishikato, @JesseKoldewijn, @Evavic44, @feugy, @liamlaverty, @dvoytenko, @SukkaW, @wbinnssmith, @rishabhpoddar, @better-salmon, @ziyafenn, @A7med3bdulBaset, @jasonuc, @yossydev, @Prachi-meon, @InfiniteCodeMonkeys, @ForsakenHarmony, @miketimmerman, @kwonoj, @williamli, @gnoff, @jsteele-stripe, @chungweileong94, @WITS, @sogoagain, @junioryono, @eisafaqiri, @yannbolliger, @aramikuto, @rocketman-21, @kenji-webdev, @michaelpeterswa, @Dannymx, @vpaflah, @zeevo, @chrisweb, @stefangeneralao, @tknickman, @Kikobeats, @ubinatus, @code-haseeb, @hmmChase, @byhow, @DanielRivers, @wojtekmaj, @paramoshkinandrew, @OMikkel, @theitaliandev, @oliviertassinari, @Ishaan2053, @Sandeep-Mani, @alyahmedaly, @Lezzio, @devjiwonchoi, @juliusmarminge, @szmazhr, @eddiejaoude, @itz-Me-Pj, @AndersDJohnson, @gentamura, @tills13, @dijonmusters, @SaiGanesh21, @vordgi, @ryota-murakami, @tszhong0411, @officialrajdeepsingh, @alexpuertasr, @AkifumiSato, @Jonas-PFX, @icyJoseph, @florian-lp, @pbzona, @erfanium, @remcohaszing, @bernardobelchior, @willashe, @kevinmitch14, @smakosh, @mnjongerius, @asobirov, @theoholl, @suu3, @ArianHamdi, @adrianha, @Sina-Abf, @kuzeykose, @meenie, @nphmuller, @javivelasco, @belgattitude, @Svetoslav99, @johnslemmer, @colbyfayock, @mehranmf31, @m-nakamura145, @ryo8000, @aryaemami59, @bestlyg, @jinsoul75, @petrovmiroslav, @nattui, @zhuyedev, @dongwonnn, @nhducit, @flotwig, @Schmavery, @abhinaypandey02, @rvetere, @coffeecupjapan, @cjimmy, @Soheiljafarnejad, @jantimon, @zengspr, @wesbos, @neomad1337, @MaxLeiter, and @devr77 for helping!
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。