Unlock The Features: What's new in Next.Js 15
Benedict Anthony
October 23rd 2024
Major Changes in Next JS
On October 21st, it was announce in the Next Js blog that Next JS 15 is stable and ready for production. in quote "Next.js 15 is officially stable and ready for production. This release builds on the updates from both RC1 and RC2. We've focused heavily on stability while adding some exciting updates we think you'll love. Try Next.js 15 today" In this article, let's go some of the exciting features of Next Js 15.
Smooth upgrades with @next/codemod CLI
According to the blog article, Next Js now include codemods (automated code transformations) with every major Next.js release to help automate upgrading breaking changes. This simply means that upgrading your current Next Js application to the latest release is smooth. Unlike having to break so many applications, the @next/codemod help in migrating your old application smoothly to use the latest Next Js features. The article emphasizes the use of the canary version even if you are upgrading to the latest version of Next Js and this is because Next Js team plan to continue adding improvements to the tool based on your feedback.
Async Request APIs (Breaking Change)
One of the major changes in Next Js is the waiting for a request before being rendered and this is the traditional way in Next Js. It's is unnecessary to wait for a request to be made before rendering the component because not all component depend on specific data. We must determine when to wait for the request in order to enable this and prepare the way for next optimizations. Theses changes affects cookies, headers, draftMode, params in layout.js, page.js, route.js, default.js, generateMetadata, and generateViewport, searchParams in page.js.Although these APIs can be accessed synchronously for the time being to make it easier forĀ Ā migration, development and production will display warnings until the next major version. It is possible to automate the migration using a codemod
Caching Semantics
By default, Next Js enables caching, but based on the feedback from users, caching is no longer enabled by default in the latest version of Next Js.
GET Route Handlers are no longer cached by default
Unless they employed a dynamic function or dynamic configuration parameter, Route Handlers that used the GET HTTP method were cached by default in Next 14. GET functions are not cached by default in Next.js 15. Using a static route configuration option, such export dynamic = 'force-static', you can still choose to use caching. Unless they make use of dynamic functions or dynamic configuration parameters, special route handlers such as sitemap.ts, opengraph-image.tsx, and icon.tsx, along with other metadata files, are by default static.
Client Router Cache no longer caches Page components by default
Next Js added an experimental staleTimes flag in Next.js 14.2.0 to enable configurable Router Cache setup. This setting is still available in Next.js 15, however Next Js are altering the default behavior so that Page segments have a staleTime of 0. This implies that the client will always display the most recent information from the Page component or components that become active as part of the navigation as you move around your app.
React 19
NextJs have decided to align with the next release of React 19 as part of the Next.js 15 release. The App Router is using React 19 RC in version 15, and in response to community input, Next JS have also included backward compatibility for React 18 with the Pages Router. This lets you update to React 19 when it's ready if you're using the Pages Router. Even though React 19 is still in the RC stage, Next JS are confident in its reliability because of thorough testing on real-world apps and our strong collaboration with the React team. The modifications that disrupt the core have been thoroughly vetted and won't impact current App Router users. As a result, Next.js 15 has been made stable so that applications are ready for React. Codemods and automated tools to facilitate the conversion process and make sure the move goes as smoothly as possible.
Turbopack Dev
This is said to be stable and its a tool to speed up development process
Static Route Indicator
During development, Next.js now shows a Static Route Indicator to assist you in determining which routes are dynamic or static. This visual hint helps you understand how your pages are rendered, which facilitates performance optimization.
instrumentation.js
Through the register() API, the instrumentation file enables users to access the Next.js server lifecycle for performance monitoring, error tracking, and deep integration.