What's New in Next.js 15: New Hooks, TurboPack, and More

Next.js has consistently pushed the boundaries of modern web development, and with version 15, they've introduced a suite of innovative features that not only enhance performance but also dramatically improve the developer experience. In this article, we’ll take a closer look at some of the most impactful updates, complete with example usages and detailed explanations. At the end of the article, you'll find a link to a Next.js v15 starter repository with detailed examples if you wish to dive right in.

---

Full Support of React 19 with New Hooks

With Next.js 15, full support for React 19 is now available. This unlocks several new hooks that simplify state management and enhance interactivity. Let’s break down the most notable ones:

1. useActionState

This hook helps manage and display the state of ongoing actions in your UI. It simplifies tasks such as updating a user list or handling form submissions.

2. useFormStatus

Ideal for tracking form submission states in real time. For instance, you can disable the submit button while the form is being processed.

3. useOptimistic

This hook is perfect for handling optimistic updates. It allows the UI to update instantly while a server request is still in progress, thereby enhancing user experience.

---

Updated Caching Strategies

The Next.js team has refined the caching system based on developer feedback. Key updates include:

1. No More Automatic Caching for fetch and Route Handlers

To ensure predictable behavior, fetch requests and route handlers now use a no-store strategy by default. To enable caching, you must specify cache parameters explicitly.

2. Client Router Caching Adjustments

Page components are no longer cached by default in the client router. This prevents issues where real-time data updates are expected during in-app navigation. To restore the previous behavior, configure caching manually in next.config.js:

3. Asynchronous Request-Specific APIs

Request-specific APIs such as headers, cookies, params, and searchParams are now asynchronous. For example, in a search page, you can now await the searchParams before rendering content.

---

Introducing the New <Form> Component

Forms are a critical part of any web application, and Next.js 15 introduces the <Form> component to simplify form handling. This component enhances the traditional HTML <form> by incorporating prefetching, client-side navigation, and progressive enhancement.

The <Form> component features:

• Prefetching: Preloads layout and loading UI when the form comes into view.
• Client-side Navigation: Maintains shared layouts and client-side state on submission.
• Progressive Enhancement: Ensures forms work even if JavaScript isn’t loaded.

---

TurboPack: Turbocharged Development

Next.js 15 now supports TurboPack in development mode. Running next dev --turbo provides significant improvements:

• Blazing-fast server startups: Up to 75% faster.
• Rapid code updates: Approximately 95% faster Fast Refresh.

In your project’s package.json, update your development script as follows:

---

Additional Developer Enhancements

1. Static Route Indicator in Dev Mode

A new static route indicator helps you quickly identify which routes are static during development, offering insights into your application’s structure.

2. ESLint 9 Support and Improved React Hooks Linting

Next.js 15 now fully supports ESLint 9 and eslint-plugin-react-hooks v5, ensuring higher code quality and better support for React hook usage.

3. TypeScript in next.config.ts

TypeScript users can now write their configuration in next.config.ts, benefiting from full type checking and improved editor support.

4. Stable Instrumentation and the onRequestError Hook

With the new register() API and onRequestError hook (in collaboration with Sentry), Next.js 15 provides robust instrumentation for performance monitoring and error tracking. This allows you to capture critical error context and integrate with observability libraries like OpenTelemetry.

---

Conclusion

Next.js 15 marks a transformative leap in web development, combining advanced AI-powered features, next-generation performance enhancements, and a suite of innovative tools designed to streamline the developer experience. From powerful new hooks in React 19 to TurboPack's performance boosts and refined caching strategies, this release redefines what’s possible in modern web applications.

Whether you’re building a dynamic e-commerce platform or a robust enterprise application, Next.js 15 empowers you to create highly efficient, scalable, and future-proof solutions. Embrace these innovations and step confidently into the future of web development.

---

Short Summary

Next.js 15 revolutionizes web development by introducing:

• Advanced React 19 Hooks: Including useActionState, useFormStatus, and useOptimistic for smarter UI management.
• Enhanced Caching & Routing: Improved caching strategies and dynamic, predictive route loading.
• TurboPack Integration: Dramatically faster development server startups and code updates.
• New <Form> Component: Streamlined form handling with prefetching, client-side navigation, and progressive enhancement.
• Developer Experience Enhancements: Support for ESLint 9, TypeScript in configuration files, and stable instrumentation hooks.

Experience a future where human creativity and machine intelligence converge to set new standards in performance and efficiency.

---

Further Reading & Resources

• Next.js Documentation
• Next.js Blog
• Web.dev Performance
• Google PageSpeed Insights

For a detailed Next.js 15 starter repository with full example usages, scroll to the bottom of this article.

Happy coding, and welcome to the future of web development!