New Changes in Next.js 15: Key Changes and Updates

Next.js version 15 has just been released, and unlike previous major updates like versions 13 and 14, this new version doesn’t bring too many big changes. However, there are still some important updates to know about if you’re working with Next.js. Upgrading to version 15 should be simple, especially with the help of a tool called a codemod. This codemod will help you update your code automatically to handle the new changes.

npx @next/codemod@canary upgrade latest

In this blog post, we’ll go over the two most important changes in Next.js 15 that could impact your code and the way your application works.

1. Async Request APIs

One of the key changes in Next.js 15 is that some built-in functions, like the cookies() function, are now asynchronous. This means you will need to use async and await with these functions going forward. For now, you can still use them the old way (synchronously), but starting with Next.js 15, you will have to use them asynchronously. This change doesn’t alter what the functions do—it just changes how you have to write the code.

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

2. Less Aggressive Caching

The second major change is how caching works in Next.js 15. When using the app router, Next.js used to aggressively cache data, which sometimes caused unexpected bugs. Now, caching is less aggressive. The most noticeable change is with the fetch() function.

In previous versions, when you used fetch() on the server side, it cached the result by default, meaning only the first request would go to the API, and after that, the data would come from the cache. But now, in version 15, caching is turned off by default. So every time you use fetch(), a new request will be sent to the API unless you manually enable caching again by using the force-cache option.

Additional Caching Changes:

• API Route Handlers: GET requests in API routes are no longer cached by default. You’ll need to handle caching yourself if needed.
• Client-Side Router: The caching of page data on the frontend is also less aggressive now, which should help avoid unexpected behavior when navigating between pages.

Ready for React 19

Next.js 15 is prepared to support React 19, which is expected to release soon. Additionally, it comes with experimental support for the new React compiler, which is expected to improve performance in the future.

TurboPack is Now Stable

TurboPack, the new build tool that speeds up development builds, is now marked as stable. It promises faster build times and a quicker development server, making it a useful tool for developers who use the app router in Next.js. You can start using it by running the development server with the next-dev --turbo flag.

New Form Component

Next.js 15 introduces a new built-in Form component. This is especially useful for forms that navigate to another page, like a search bar. It prefetches the page you’re navigating to, making the process faster. For regular forms like sign-up forms where you’re sending data to the backend, you’ll still want to use the standard HTML form element.