Exploring the key changes of Next.js 15

1. @next/codemod CLI for Easy Upgrades

With the introduction of the new @next/codemod CLI tool, upgrading to the latest versions of Next.js and React has been significantly simplified. The tool automates the migration process, updates dependencies, and guides developers through applying necessary codemods.

To upgrade to the latest version, you can run the following command in your terminal:

npx @next/codemod@canary upgrade latest

2. Async Request APIs (Breaking Change)

A significant breaking change in this version is the transition to asynchronous request APIs. This means that the server no longer needs to wait for a request to render components that do not depend on request-specific data. APIs like cookies, headers, and searchParams must now be used asynchronously.

export async function getServerSideProps(context) {
	const cookies = context.req.cookies;
	
	return {
		props: {
			user: cookies.user || null,
		},
	};
}

3. New Caching Semantics (Breaking Change)

Based on community feedback, the caching standards in Next.js 15 have been revised. GET route handlers and the client router caches are now not cached by default. Developers can still use a cached variant if needed.

Using cache: "force-cache" will enforce caching for this route.

export const config = {
	runtime: 'experimental-edge',
	cache: 'force-cache',
};

export default function MyPage() {
	return <div>Welcome to the page!</div>;
}

4. Support for React 19

Next.js 15 now supports React 19 and provides backward compatibility for React 18 through the Pages Router. This allows developers to upgrade their applications to React 19 when they are ready while still benefiting from the improvements in Next.js 15.

React 19 brings new hooks and improvements. Here’s a simple example of how to use a new hook:

import { useNewHook } from 'react';

function MyComponent() {
	const value = useNewHook();
	return <div>The value is: {value}</div>;
}

5. Stability of Turbopack

The Turbopack Dev tool has been stabilized, significantly improving the development environment. Tests have shown that local server startup time is up to 76.7% faster, and code updates with Fast Refresh are up to 96.3% faster.

To start your project with Turbopack, you can use the following command:

npm run dev -- --turbo

6. Static Indicator for Routes

A new visualization tool, the Static Indicator, shows which routes are static during development. This helps developers better optimize the performance of their applications by understanding how their pages are rendered.

In your next.config.js, you can enable the Static Indicator:

module.exports = {
	experimental: {
		staticIndicator: true,
	},
};

7. Improved Error Handling for Hydration

Next.js 15 builds on improvements in error handling and now provides enhanced representations of hydration errors. Error displays now show the source code of the error and provide helpful hints for fixing it.

8. Experimental unstable_after API

Another exciting new feature is the unstable_after API, which allows you to schedule tasks after a response is finished. This enables tasks like logging or synchronization to be completed without delay for the user.

export default async function handler(req, res) {
	res.status(200).json({ message: "Hello World" });
	
	unstable_after(() => {
		console.log("Task executed after response.");
	});
}

9. Improvements for HTML Forms

Support for HTML forms has been significantly improved, allowing developers to use client-side navigation for their forms.

<form method="POST" action="/submit">
	<input type="text" name="username" required />
	<button type="submit">Submit</button>
</form>

10. TypeScript Support in next.config.ts

You can now configure Next.js in TypeScript (next.config.ts), providing developers with more flexibility and type safety.

import { NextConfig } from 'next';

const nextConfig: NextConfig = {
	reactStrictMode: true,
};

export default nextConfig;

Conclusion

Next.js 15 brings numerous changes and improvements that enhance both the developer experience and the performance of applications. With the introduction of new tools like the @next/codemod CLI, support for React 19, and improved handling of asynchronous requests, this version provides a solid foundation for modern web development. Now is the perfect time to upgrade to Next.js 15 and try out the new features.

My article is based on the current Next.js 15 Documentation. Feel free to check there for more information.