What's New in Nextjs 15 from Turbopack to Makerkit Migration

Next.js 15 is here, and it's packed with exciting new features. Turbopack is now the default bundler, replacing Webpack, which means faster build times and improved performance.

This migration to Turbopack brings significant speed gains, with Next.js 15 builds up to 2.5 times faster than before.

With Turbopack's advanced caching and incremental builds, developers can focus on writing code rather than waiting for builds to complete.

Next.js 15 brings a slew of exciting features and improvements that make building and maintaining applications a breeze.

One of the standout features is the improved hydration error messages, which provide more detailed information about the source code of the error and suggestions on how to address the issue.

This is especially helpful for debugging hydration errors, which can be frustrating and difficult to tackle.

With Next.js 15, you can now get full support for React 19, enabling its new features like the additional hooks. Some of the most notable ones include useActionState: This hook helps manage and display the state of ongoing actions in our UI.useOptimistic: Perfect for handling optimistic updates, allowing the UI to update instantly while a request is still in progress.

These hooks can greatly enhance the user experience and make your application more responsive and efficient.

Next.js 15 brings exciting new hooks that simplify your development workflow. One notable example is the useActionState hook, which helps manage and display the state of ongoing actions in your UI. This hook is perfect for keeping your users informed about the status of their requests.

The useOptimistic hook is another powerful tool that enables optimistic updates, allowing your UI to update instantly while a request is still in progress. This can greatly improve the user experience by providing a seamless and responsive interface.

Here are some of the new hooks introduced in Next.js 15, along with a brief description of each:

These new hooks are a game-changer for developers, making it easier to build fast and efficient applications. By leveraging these hooks, you can create a more engaging and responsive user experience.

Asynchronous APIs are now a key feature in Next.js 15. This means that APIs like headers, cookies, and searchParams are no longer synchronous.

In the past, you could use these APIs without worrying about asynchronous code, but now you'll need to use the await keyword to wait for the API to return a value before using it.

Dynamic APIs are now asynchronous, which is a breaking change. This change is necessary to support new rendering modes, such as Dynamic IO.

If you're updating your existing code, you'll need to change how you use cookies, searchParams, and params. For example, you'll need to use a Promise-based API to access cookies, like this:

The good news is that updating to these new APIs is a relatively straightforward process.

The new form component in Next.js 15 is a game-changer for web app development. It's designed to streamline form functionality and make navigation faster and more efficient.

Prefetching is a key feature of the new form component. It prefetches the layout and loading UI when the form comes into view, speeding up navigation significantly.

The new form component also preserves shared layouts and client-side state on submission, making for a seamless user experience. This is achieved through client-side navigation.

Forms still work even if JavaScript isn't loaded, thanks to progressive enhancement. This ensures that users can navigate the page fully, even without JavaScript enabled.

Here are the key benefits of the new form component:

Next.js 15 introduces support for ESLint 9, while remaining backwards-compatible with ESLint 8.

This means you can take advantage of the latest ESLint features without worrying about breaking your existing code.

The update also ensures better support for React hook usage, thanks to the latest version of eslint-plugin-react-hooks v5.

This improvement will help you write even higher quality code in your Next.js projects.

Next.js 15 is making a big push to improve hydration error messages, providing more detailed information about the source code of the error. This is a game-changer for developers, as it will make debugging much easier.

With Next.js 15, you can expect to see more detailed error messages that include suggestions on how to address the issue. This means you'll be able to quickly identify and fix problems, getting your app back up and running in no time.

Hydration errors are a common issue in Next.js applications, but with Next.js 15, the stacktraces are much easier to understand. This is a huge relief for developers, who often struggle to decipher complex error messages.

The improved hydration error messages in Next.js 15 will make it easier to debug and fix issues, saving you time and frustration.

Turbopack, the new Rust-based bundler, got a significant speed boost in Next.js 15. Most pages now compile in under 1 second, and live reload takes less than 100 milliseconds.

To optimize your dependencies and prevent slowdowns, make sure to analyze and optimize them as much as possible. Extremely large or unoptimized dependencies can still cause severe slowdowns.

Enabling the profiling feature in Turbopack can help you identify performance bottlenecks. Set the environment variable NEXT_TURBOPACK_TRACING to 1 and run your application to generate a trace.log file in the .next directory.

In Next.js 15, the caching system has undergone significant changes to provide more predictable behavior. No more automatic caching for fetch and route handlers, which can now be explicitly opted-in to cache.

Fetch requests will use the no-store strategy by default, which means they won't be cached unless you include explicit cache parameters. This change helps prevent potential issues when users expect real-time data updates.

The client router caching has also been adjusted in Next.js 15. Page components are no longer cached by default, which can cause issues with real-time data updates. To retain the original caching behavior, you can configure it manually.

Here's a summary of the changes to caching strategies in Next.js 15:

Stable Instrumentation is a game-changer for Next.js 15, thanks to the introduction of the register() API, which allows for deep integration with observability libraries like OpenTelemetry.

This means we can now hook into the Next.js server lifecycle for performance monitoring and error tracking, making it easier to catch and track server-side issues.

Partial Prerendering allows you to combine static and dynamic rendering on the same page.

In Next.js 15, you can opt specific Layouts and Pages into Partial Prerendering (PPR) by setting the experimental.ppr config in next.config.js to 'incremental'.

To use this feature, you need to add the experimental.ppr config option to your next.config.js file.

You can also enable PPR for a specific route or layout by exporting the experimental_ppr constant from the route's file.

This is still an experimental feature, so keep in mind that it may change in future versions of Next.js and may be unstable.

Enabling PPR globally is as simple as adding ppr: 'incremental' within the experimental object of the next.config.mjs file.

If you want to enable PPR for a specific route only, you can export the experimental_ppr constant from the route's file.