What’s New in Next.js 15: Key Updates and Breaking Changes

Next js

Next.js 15 has officially been released, packed with new features, improvements, and a few breaking changes that every developer should be aware of. If you’re working with Next.js or plan to upgrade soon, here’s an in-depth look at what’s new in this major release.

1. @next/codemod CLI: Seamless Upgrades

Upgrading your Next.js applications just got easier with the enhanced @next/codemod CLI. This tool automates the process of upgrading to the latest Next.js and React versions. It helps you update dependencies, apply codemods, and even offers a smooth migration for breaking changes.

npx @next/codemod@canary upgrade latest

By using the Canary version of the codemod, you ensure that you are always working with the latest improvements.

2. Async Request APIs (Breaking Change)

Next.js 15 introduces asynchronous APIs for server-side data handling, transitioning away from synchronous methods for cookies, headers, and request parameters. This change optimizes rendering by preparing as much as possible before the request arrives, improving performance.

Old Synchronous Example:

import { cookies } from 'next/headers';

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

New Asynchronous Example:

import { cookies } from 'next/headers';

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

A codemod is available to help migrate to these new async APIs.

3. Caching Semantics (Breaking Change)

With Next.js 15, fetch requests, GET Route Handlers, and Client Router Cache are no longer cached by default. This change makes the framework more flexible by allowing developers to opt-in to caching only when needed, improving control over how data is handled.

To Cache a Fetch Request:

fetch('https://...', { cache: 'force-cache' });

This adjustment ensures more predictable caching behavior, especially for dynamic applications.

4. React 19 Support

Next.js 15 comes with support for the React 19 release candidate, offering backward compatibility with React 18 for those using the Pages Router. This flexibility allows developers to upgrade to React 19 at their own pace while leveraging the new Next.js features.

5. Turbopack Dev (Stable)

Next.js 15 stabilizes Turbopack, the faster bundler introduced in Next.js 13. With improved performance, Turbopack Dev accelerates local server startups by up to 76% and speeds up Fast Refresh by over 96%. This ensures a much faster development experience for large projects.

6. New <Form> Component

A new <Form> component has been introduced to simplify form handling with features like prefetching, client-side navigation, and progressive enhancement. This reduces the need for boilerplate code while making forms more responsive and efficient.

Example:

import Form from 'next/form';

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

7. Enhanced Server Actions Security

Server Actions now have unguessable IDs and unused actions are automatically removed during the build process, making your application more secure. These changes help prevent unintended exposure of server functions.

8. Static Route Indicator

Next.js 15 introduces a visual Static Route Indicator during development, helping developers identify static or dynamic routes at a glance. This aids in optimizing performance by understanding how pages are rendered.

9. ESLint 9 Support

Next.js 15 also includes support for ESLint 9, making it compatible with the latest linting features while offering backward compatibility for those still using ESLint 8.

10. Hydration Error Improvements

Hydration errors are now more informative, displaying the source code of the issue and offering suggestions for fixing it. This provides better debugging experiences and reduces the time spent troubleshooting hydration issues.

Conclusion

Next.js 15 brings performance improvements, enhanced security, and new tools for developers. Whether you’re upgrading from a previous version or starting fresh, this release offers a stable and robust platform for building high-performance React applications. Make sure to check out the detailed upgrade guide and try out the new features in your projects today!

With these exciting updates, Next.js continues to push the boundaries of modern web development. Be sure to keep an eye out for more insights during the upcoming Next.js Conf.