What's New in Next.js 15?

With a host of new features and some critical breaking changes, Next.js 15 is set to redefine the developer experience.

Let's dive into what's new and why it matters.

1. Effortless Upgrades with the New @next/codemod CLI

Upgrading large projects has always been a challenge, especially when major versions introduce breaking changes.

Next.js 15 simplifies this process with the new [@next/codemod](https://nextjs.org/docs/app/building-your-application/upgrading/codemods) CLI.

This enhanced tool automates much of the upgrade, scanning your codebase for outdated patterns and guiding you through necessary adjustments.

Here's how to get started:

1npx @next/codemod@canary upgrade latest

By using this command, you'll have access to the latest Next.js features, including those that are still in experimental phases, ensuring you're always up to date.

2. Async Request APIs: A Fundamental Shift

One of the biggest changes in Next.js 15 is the move towards Async Request APIs.

Traditionally, APIs like cookies, headers, and params were synchronous. With the shift to asynchronous APIs, Next.js is paving the way for a more streamlined rendering and caching model.

This change means you can now start preparing content on the server before receiving a full request, speeding up response times.

For example, fetching cookies asynchronously looks like this:

1import { cookies } from 'next/headers';  
2  
3export async function AdminPanel() {  
4  const cookieStore = await cookies();  
5  const token = cookieStore.get('token');  
6    
7  // Use the token...  
8}

While this is a breaking change, the @next/codemod CLI can handle most of the migration for you.

And for cases where the codemod can't fully migrate your code, read this.

3. Updated Caching Semantics

Now, fetch requests, GET route handlers, and client-side navigations are not cached by default.

This is a significant change from the previous behavior where these were cached unless specified otherwise.

To opt back into caching, you can explicitly set caching strategies:

1fetch('https://api.example.com/data', { cache: 'force-cache' });

This shift allows developers to have more control over data freshness, especially in fast-changing applications.

4. React 19 and the Future of React

With the imminent arrival of React 19, Next.js 15 positions itself as future-ready by fully supporting React 19 while maintaining backward compatibility with React 18.

The new version benefits from React Compiler — an experimental feature that optimizes performance by minimizing the need for manual optimization.

For those using the Pages Router, React 18 will continue to be supported, providing a seamless upgrade path.

React Conf 2024 Recap - React

5. Turbopack Goes Stable: Faster Development Cycles

The development experience gets a significant boost in Next.js 15, with the stabilization of Turbopack, the next-generation bundler.

Promising up to 96% faster updates with Fast Refresh, Turbopack is now the go-to for speeding up local development:

• Faster startup times
• Enhanced code updates
• Smoother route transitions

Developers of large-scale apps will particularly appreciate the improvements to initial compile times.

6. Enhanced Forms with <Form> Component

In version 15, Next.js introduces a new [<Form>](https://nextjs.org/docs/app/api-reference/components/form) component that makes form handling a breeze.

With built-in prefetching and client-side navigation, the <Form> component reduces boilerplate and enhances the user experience.

Here's an example:

1import Form from 'next/form';  
2  
3export default function Page() {  
4  return (  
5    <Form action="/search">  
6      <input name="query" />  
7      <button type="submit">Search</button>  
8    </Form>  
9  );  
10}

This small change significantly simplifies form integration, particularly for search pages and forms that trigger client-side navigation.

7. Visual Feedback with Static Route Indicator

The new Static Route Indicator provides a visual cue during development, clearly marking routes that are static or dynamic.

This small yet impactful feature aids in performance tuning by making it easy to identify which pages can be pre-rendered for faster load times.

8. Observability Improvements with instrumentation.js API

Observability is now a first-class citizen in Next.js 15, with the stabilization of the **instrumentation.js** API.

This API allows developers to track server-side performance, capture error contexts, and integrate seamlessly with tools like OpenTelemetry.

For instance, here's how you might handle server errors with the new API:

1export async function onRequestError(err, request, context) {  
2  await fetch('https://error-tracker.example.com', {  
3    method: 'POST',  
4    body: JSON.stringify({ message: err.message, request, context }),  
5    headers: { 'Content-Type': 'application/json' },  
6  });  
7}

With built-in hooks for monitoring, the instrumentation.js API enables better debugging and insight into app behavior.

9. Streamlined Configurations with TypeScript Support in next.config.ts

Next.js 15 introduces support for next.config.ts, allowing TypeScript users to manage configurations with type safety and autocompletion.

This change not only makes it easier to catch config errors but also simplifies the developer experience.

1import type { NextConfig } from 'next';  
2  
3const nextConfig: NextConfig = {  
4  /* Your configuration here */  
5};  
6  
7export default nextConfig;

10. Improved Security and Self-Hosting Capabilities

Security gets a boost with enhancements in Server Actions, which now feature unguessable endpoints and dead code elimination.

This reduces the attack surface and optimizes bundle sizes by automatically removing unused code.

Additionally, self-hosted Next.js instances now have better control over Cache-Control headers, improving flexibility and compatibility with CDNs.

Conclusion: A Next-Gen Experience with Next.js 15

This release is all about giving developers more control, better performance, and a smoother developer experience.

I hope this quick read has been insightful for you. Feel free to dive into the comments to discuss these fresh updates.

For a more in-depth look at each point, make sure to check out the Next.js team's official blog post: Next.js 15 Details.

Upgrading: Version 15 | Next.js

Release v15.0.0 · vercel/next.js

And to see the keynote:

Next.js Conf by Vercel