What’s New in Next.js 13.5? Key Features and Performance Boosts Explained

21CTO Guide: Vercel announces the release of Next.js 13.5.

What Is Next.js?

Next.js is a production‑grade framework built on React for creating full‑stack React applications. It receives over 1,258,087 weekly npm downloads, was open‑sourced by the Vercel team on October 25, 2016, and the latest version is 13.5.1. In recent years, Next.js has gained massive popularity within the React ecosystem.

On GitHub, Next.js has 112K stars, 24.7K forks, 1.4K watchers, 1.8 million users, and 2,885 contributors.

Major tech companies using Next.js include Meta, Uber, Auth0, and TripAdvisor.

Key Features That Make Next.js a Full‑Stack Framework

Built‑in optimizations for images, fonts, layout scripts, application scripts, static and dynamic file‑based metadata, static assets, lazy loading, speed analysis, Web Vitals, and more.

Middleware in Next.js allows code execution before a request is fulfilled. You can use simple middleware, path‑matched middleware, or conditional statements.

With the NextResponse API, you can redirect and rewrite URLs, read client request headers, set response cookies and headers, and enable advanced middleware flags.

Client‑side and server‑side rendering in Next.js lets you render UI using both client and server components.

CSS support includes global CSS, CSS modules, SASS, Tailwind CSS, and CSS‑in‑JS for styling Next.js applications.

Advanced routing and nested layouts let developers customize routing and layout structures via the file system.

The Node.js and Edge runtimes in Next.js enable serverless functions for building fast, scalable web apps, delivering dynamic and personalized content.

Data fetching in Next.js helps perform asynchronous operations on both client and server, handling form submissions and data mutations.

New Features in Next.js 13.5

This version brings several improvements: local server start‑up speed is 22% faster, memory usage drops by 40%, and package imports are further optimized.

Performance gains come from better caching, minimizing slow operations, optimizing expensive file‑system work, improved incremental tree traversal during compilation, replacing unnecessary blocking sync calls with lazy calls, and auto‑configuring large icon‑library drivers.

Maintainers introduced a new "optimize" option that automatically optimizes package imports, replacing the previous manual process. Many libraries are now pre‑optimized to load only the modules your code uses.

Vercel added an experimental function unstable_getImgProps() to improve next/image. This enables advanced use cases such as background‑image, image‑set, canvas drawing via context.drawImage() or new Image(), and <picture> media queries for art direction and dark‑mode images.

Previously, developers needed to use the <Image> component for these operations; the new function simplifies them.

The release also includes new documentation across areas like forms, mutations, server and client components, content security policy, random numbers, caching, and validation.

Other new features include IPv6 host support, draft mode in middleware and edge runtime, and an experimental mode for Playwright.

Next.js 13.5 contains a total of 438 improvements and bug fixes.

Related link: https://nextjs.org/blog/next-13-5

Further Reading:

Future‑Oriented Front‑End Application Directory Design Best Practices

Most Popular Front‑End Frameworks of 2023

Dart Frog: Front‑End Language Shifts to the Back‑End