Next.js 15 - Part 1

Next.js 15 is officially stable, packed with new features and improvements designed to enhance developer experience and performance. This release builds on the foundations laid by the previous release candidates (RC1 and RC2), with a strong focus on stability and innovation.

The highlight of this version is its compatibility with React 19, bringing in key features such as hydration error improvements and incremental changes in the rendering and caching models.

Next.js 15 also introduces several performance optimizations, including faster Fast Refresh, improved build times, and a visual static route indicator for development environments.

What’s New

1.Automatic upgrades

Easily update to the latest version of Next.js and React.

npx @next/codemod@canary upgrade latest

This tool helps you upgrade your codebase to the latest stable or prerelease versions. The CLI will update your dependencies, show available codemods, and guide you through applying them.

2.Simplified rendering and caching

fetch requests, GET Route Handlers, and client navigations are now uncached by default, giving developers more control over caching behavior.

3.Server-side lifecycle observability

A new API has been introduced to track and monitor the server lifecycle.

import { cookies } from 'next/headers';

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');

  // ...
}

In traditional Server-Side Rendering, the server waits for a request before rendering any content. However, not all components depend on request-specific data, so it's unnecessary to wait for the request to render them. Ideally, the server would prepare as much as possible before a request arrives. To enable this, and set the stage for future optimizations, we need to know when to wait for the request.

Therefore, the following APIs that rely on request-specific data—such as headers, cookies, params, and searchParams—to be asynchronous.

This is a breaking change and affects the following APIs:

• cookies

• headers

• draftMode

• params in layout.js, page.js, route.js, default.js, generateMetadata, and generateViewport

• searchParams in page.js

4.Improved form handling

HTML forms now support client-side navigation without the need for custom implementations.

The new <Form> component extends the HTML element with prefetching, client-side navigation, and progressive enhancement.

import Form from 'next/form';

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

The <Form> component comes with:

• Prefetching: When the form is in view, the layout and loading UI are prefetched, making navigation fast.

• Client-side Navigation: On submission, shared layouts and client-side state are preserved.

• Progressive Enhancement: If JavaScript hasn't loaded yet, the form still works via full-page navigation.

These features enhance the development and deployment experience for teams working on complex projects.

5.Support for next.config.ts

Next.js 15 also includes TypeScript support for next.config.ts, and the Cache-Control header management has been fine-tuned to give developers more flexibility when working with self-hosted applications. These features enhance the development and deployment experience for teams working on complex projects.

With its focus on stability, performance, and seamless integration with React 19, Next.js 15 continues to push the boundaries of web development frameworks. Whether you’re upgrading from a previous version or just starting with Next.js, this release provides the tools and features needed to build fast, reliable, and scalable applications.