Next.js 13.5 is officially released, with greatly improved speed!

On September 19, Next.js 13.5 was officially released. This version improves local development performance and reliability in the following ways:

• Local server startup is 22% faster : iterate faster with App and Pages Router

• 29% faster HMR (Fast Refresh) : faster iterations when saving changes

• 40% reduction in memory usage : next startmeasured at runtime

• Optimized package import : faster updates when using popular icon and component libraries

• next/image improvements : support <picture>labels, dark mode, etc.

• Over 438 bugs fixed!

Improved startup and fast refresh times

App Router adoption continues to grow, growing at a rate of 80% per month according to HTTP Archive statistics on the top 10 million websites .

image.png

Since Next.js version 13.4, the Next.js team's focus has been on improving the performance and reliability of the App Router application. Comparing versions 13.4 and 13.5, you can see the following improvements in a new application:

• Local server startup speed increased by 22%

• HMR (Fast Refresh) is 29% faster

• Memory usage reduced by 40%

This performance improvement is achieved through the following optimization methods:

• Reduce workload by caching or reducing slow operations

• Optimize expensive file system operations

• Implement better incremental tree traversal during compilation

• Change unnecessary blocking synchronous calls to lazy loading

• Automatically configure large icon libraries

Next.js user Hanford reported 87-92% compilation speed improvements in their tests!

image.png

While we continue to iterate and improve the performance of our current packaging tools, the Next.js team is also developing Turbopack (beta) to further improve performance. In version 13.5, next dev --turbomore features are now supported.

Optimized package import

This release features exciting breakthroughs in package importing, improving local development performance and production cold start speed when working with large icon or component libraries and other dependencies that re-export hundreds or thousands of modules.

Previously, support was added modularizeImportsto allow developers to configure how imports are resolved when using these libraries. In version 13.5, optimizePackageImportsthis option has been replaced by

Libraries like @mui/icons-material, @mui/material, date-fns, lodash, lodash-es, ramda, react-bootstrap, @headlessui/react, @heroicons/reactand l ucide-reactcan now be automatically optimized to load only the modules that are actually used, while making it easy to write import statements with many named exports.

next/image improvements

Based on community feedback, this release adds a new experimental function unstable_getImgProps()to support <Image>advanced use cases that do not use components directly, including:

• process background-imageorimage-set

• Use canvas context.drawImage()or new Image()when operating

• Use <picture>media queries to implement artistic direction or light/dark mode images

• Use <picture>the element's media query function to switch between light and dark mode images.

import { unstable_getImgProps as getImgProps } from 'next/image';



export default function Page() {

  const common = { alt: 'Hero', width: 800, height: 400 };

  const {

    props: { srcSet: dark },

  } = getImgProps({ ...common, src: '/dark.png' });

  const {

    props: { srcSet: light, ...rest },

  } = getImgProps({ ...common, src: '/light.png' });



  return (

    <picture>

      <source media="(prefers-color-scheme: dark)" srcSet={dark} />

      <source media="(prefers-color-scheme: light)" srcSet={light} />

      <img {...rest} />

    </picture>

  );

}

Additionally, properties now placeholdersupport providing arbitrary data:image/placeholder images that will not be blurred.

Other improvements

Since version 13.4.0, I've fixed over 438 bugs and made various improvements, including:

• [Documentation] New documentation on forms and mutations

• [Documentation] New documentation on server and client components

• [Documentation] New documentation on content security policy and non-ces

• [Documentation] New documentation on caching and revalidation

• next/navigation[FEATURE] Added support for Medium useParamsand Medium in Page Router useSearchParamsfor phased adoption

• [feature] supported on router.push/router.replacescroll: false

• [Function] next/linkSupported onscroll={false}

• [Function] The development environment supports HTTPS:next dev --experimental-https

• [Function] Added cookies().has()support for

• [Feature] Added support for IPv6 hostname

• [Feature] App Router now supports Yarn PnP

• [Feature] Added redirect()support for server operation

• [Feature] Support for using Bun by creating projects:bunx create-next-app

• [FEATURE] Draft mode support in middleware and edge runtime

• [Function] Now the middleware supports cookies()andheaders()

• [FEATURE] Metadata API now supported in Twitter cardssummary_large_image

• [Feature] RedirectType is now next/navigationexported from

• [FEATURE] Added Experimental Test Mode for Playwright

• [Improvement] Refactored next startto handle up to 1062% more requests than before

• [Improvement] Optimized Next.js internals to improve cold start performance (up to 40% speed increase, tested on Vercel)

• [Improvement] Enhanced Jest support for App Router

• [Improvement] Redesigned next devoutput

• [Improvement] Server side operations now work with fully static routing (including using ISR to re-validate data)

• [Improvement] Server-side operations no longer block navigation between routes

• [Improvement] Server-side operations can no longer trigger multiple concurrent operations

• [Improvement] edirect()Server side operations calling r now push it onto the history stack instead of replacing the current entry to ensure the back button works properly

• [Improvement] The server-side operation adds a header to prevent browser caching no-cache.no-store cache-control

• [Improvement] Fixed a bug where server-side operations may be called twice after navigation

• [Improvement] Improved support for Emotion CSS with server-side components

• [Improvement] Support scroll-behavior: smoothfor hashed URL changes

• Array.prototype.at[Improvement] Polyfill added in all browsers

• [Improvement] Fixed next deva race condition that could occur when the cache handles multiple parallel requests

• [Improvement] Output in the console fetchnow shows requests that skipped the cache (cache: SKIP)

• [Improvement] usePathnameNow correctly removedbasePath

• [Improvement] next/imageImages are now preloaded correctly in App Router

• [Improvement] not-foundNo longer render root layout twice

• [Improvement] It is now possible to clone NextRequest(i.e. new NextRequest(request))

• [Improvement] Text routing app/children/page.tsxis now handled correctly/children

• [Improvement] Content Security Policy now supports pre-initialization scriptsnonce

• [Improvement] next/navigationNow supported when using redirectbasePath

• [Improvement] Improved error message when using unsupported features in Static Export

• [Improvement] Improved recursive readdirimplementation (about 3 times faster)

• [Improvement] Fixed the problem of hanging requests caused by fallback: false in dynamic routing segments

• [Improvement] Fixed a bug where passing a signal to a revalidation request caused the request to fail when the request had been cancelled.

• [Improvement] Removed fetch polling on 404 pages and used websocket events instead to avoid next devunnecessary reloading at runtime

• [Improvement] performance.measureNo longer causes hydration mismatch

• [Improvement] Fixed pages/_appa situation where an unexpected full reload could occur while editing

• [Improvement] ImageResponseNow extends from Responseto improve type checking

• [Improvement] next buildNo longer displayed when there is no page output inpages

• [Improvement] Fixed the issue that <Link>was ignored inskipTrailingSlashRedirect

• [Improvement] Fixed the issue of duplicate dynamic metadata routing in development mode