Exploring the Key Features of Next.js 15: Enhancements and Changes

Next.js 15 has been launched, introducing numerous new features, particularly improvements in caching. The speaker expresses enthusiasm about these changes and plans to discuss breaking changes and upgrade requirements from Next.js 14 to 15.

The speaker recounts the confusion surrounding the release of Next.js 15's second release candidate just six days before the stable version was launched. This unusual timing, following a lengthy gap since the first release candidate, left the speaker puzzled, especially after investing significant effort into a video that became irrelevant upon the stable release.

A fresh installation of Next.js 15 is showcased, highlighting the default settings. The speaker emphasizes the convenience of a code mod that simplifies the upgrade process from Next.js 14 to 15, addressing several breaking changes that necessitate minor code adjustments across projects.

The speaker introduces the first significant breaking change: the transition to asynchronous request APIs. Previously, headers, cookies, and parameters were accessed directly, but now headers are treated as a promise. This change aims to enhance application speed by allowing static rendering of more components, although it requires developers to adapt to the new asynchronous handling.

In addition to headers, parameters and search parameters are also now asynchronous. The speaker illustrates this with an example of creating a new page that utilizes parameters, indicating that developers will need to adjust their code to accommodate this new asynchronous behavior.

The speaker discusses the transition to using promises in the new Next.js version, emphasizing the need to properly type asynchronous functions. They note that the previous method of handling promises is no longer valid, and the correct approach involves using 'await' to manage asynchronous operations effectively.

A significant change in Next.js 15 is the modification of caching behavior, which was a major pain point in version 14. The speaker highlights that caching is now less aggressive by default, meaning fetches are no longer cached automatically. This allows developers to fine-tune caching strategies, opting in to cache specific data rather than having everything cached by default, which previously led to numerous bugs and complications.

The speaker expresses relief over the removal of default caching for GET route handlers in Next.js. Previously, all API routes were cached, which was deemed a poor design choice. The new version rectifies this by ensuring that API routes are not cached by default, simplifying the development process.

The speaker addresses a major complaint regarding the client router's caching mechanism in Next.js. In earlier versions, dynamically rendered pages were cached for 30 seconds, which caused issues when users returned to a page expecting fresh data. The new default caching time has been set to zero seconds, allowing for immediate updates and ensuring that users see the most current version of a page without encountering stale data.

The speaker expresses relief over the rollback of caching changes in Next.js, noting that it has become clearer what is cached by default, with almost nothing being cached now. This change enhances the development experience, as the previous caching methods were not enjoyable.

Next.js is utilizing React 19, specifically the release candidate versions, allowing developers to access beta features. The speaker mentions having a dedicated video discussing the changes in React 19, emphasizing the benefits of using this version with Next.js.

An improvement in the development experience includes better visibility for hydration errors. The speaker explains that these errors occur when the server-rendered UI does not match the client-rendered UI. The new feature allows developers to see the source code where the error originates, making it easier to debug these complex issues.

Next.js is introducing support for Turbo Pack, a fast compiler designed to enhance code compilation speed. Although Turbo Pack is disabled by default, developers can enable it by adding the '--turbo' flag. The speaker shares personal testing results, indicating that Turbo Pack significantly improves compilation speed during development, although it does not affect production performance.

To address static route and caching issues, Next.js has added a static route indicator on every statically rendered page. This feature allows developers to easily identify which pages are static versus dynamic during development, facilitating debugging without needing to build the entire project.

The speaker introduces an experimental feature called 'unstable after,' which aims to enhance application functionality. Although details are limited, the speaker expresses excitement about its potential benefits for developers.

The discussion begins with the importance of handling background tasks like logging and sending emails to admins without making the client wait. This new experimental feature allows developers to run code after sending the response to clients, enhancing the perceived speed of applications. By offloading tasks such as logging and emailing, developers can ensure that the client experience remains smooth and fast, as these tasks are executed post-rendering.

The speaker introduces the Next.js form component, emphasizing its specific use case for rendering forms that navigate to another page, particularly for search functionalities. An example is provided where a search form redirects to a search results page, passing the query as a parameter. The speaker demonstrates the implementation, correcting a minor error in the code to ensure the query is properly passed. This form component simplifies the process of client-side navigation, allowing for a seamless user experience without full page refreshes, thus making forms work effectively within Next.js.

The speaker emphasizes that if JavaScript hasn't loaded yet, it doesn't necessitate replacing all forms with a new form component. This change should only be made when navigating between different pages, specifically regarding the form's action.

Next.js now includes TypeScript support by default when creating a new project, enhancing the experience for TypeScript users. Additionally, there are improvements aimed at self-hosting, although the speaker notes that self-hosting has historically been challenging with Next.js, likely due to Vercel's business model which profits from hosting Next.js applications.

The speaker discusses enhanced security measures for Server Actions in Next.js, which function as public APIs. Many developers may not realize that their server actions are publicly accessible, leading to potential security oversights. To mitigate this, Next.js will not deploy unused server actions, thus preventing unnecessary code exposure. Furthermore, secure action IDs are introduced, which are unique to each action, making it harder for malicious users to exploit these public APIs.

To create a server action, the speaker demonstrates defining a new folder called 'actions' and creating a file named 'server action.ts'. By using 'use server' at the top of the file and exporting an asynchronous function, developers can implement server actions. The speaker illustrates this by creating a simple action that returns 'Hi', which can be tested through a normal form submission.

Upon submitting the form, the speaker shows that the console logs 'Hi' each time the button is clicked. In the network tab, a unique 'action ID' is visible for each action, which is designed to enhance security. This action ID is included as a hidden input in the form, and it is periodically recalculated to further reduce the risk of abuse. However, the speaker cautions that despite these measures, the public nature of the code means that security through obscurity is not a reliable form of security.

The speaker emphasizes the importance of ensuring server actions are secure and publicly accessible, indicating that while some changes may not seem critical, security should always be a priority.

Next.js 15 introduces support for ESLint 9, as ESLint 8 has reached its end of life. By default, the application still uses ESLint 8, but developers have the option to upgrade to ESLint 9, which is now supported.

The speaker notes several changes aimed at enhancing development speed and build times in Next.js 15. However, they caution against experimenting with new static generation controls, as these features are experimental and may not be necessary for most applications.

A significant change in Next.js 15 is that when using 'create-react-next-app', all .env files are now ignored by default. This update helps prevent accidental commits of sensitive information, such as database URLs, which was a common issue in previous versions.

The speaker promotes their Next.js course, currently being updated from version 14 to 15. They assure that all updates will be provided for free to current students, encouraging viewers to enroll while the course is still at version 14 to benefit from future updates.