What's new in Next.js 15

What is Next.js

Next.js is a full-stack React framework that enables you to create high-quality web applications with various features and optimizations.

Advantages of Next.js compared to React

• Next is a framework based on react. But React is a library, not a framework.
• You can configure almost everything in Next.
• Next is famous for server-side rendering and static generation of websites.
• The web apps built using Next.js are very fast.
• Smaller but very dedicated community.
• SEO-friendly out of the box, But React needs some setup to make it SEO-friendly.
• Doesn’t require offline support
• Next is opinionated

What's new in Next.js 15

Supports for React 19 RC (React Compiler)

React Canary Channel:
The Next.js App Router is built on the React canary channel, allowing early use and feedback on React APIs before React 19’s official release.

React 19 Features:

• use hook (replaces many other hooks)
• Ability to pass ref as a prop
• New client and server features like Actions

If you're interested to know more about React 19 upgraded features, check here

Experimental React Compiler

• New Compiler: Created by Meta’s React team, it deeply understands JavaScript semantics and React rules to optimize code automatically.
• Code Simplification: Reduces manual memorization, making code simpler, easier to maintain, and less error-prone.
• Next.js 15 Support: Includes support for the new React Compiler.

Hydration Error Improvements

• Enhanced Error View: Improved error messages with Next.js 14.1 are built upon. Next.js 15 now displays source code of errors with suggestions on fixing them.

Hydration Error Before

Hydration Error New

Caching Updates

Re-evaluated Caching Rules:

• Fetch requests, GET Route Handlers, and Client Router Cache are no longer cached by default.
• You can opt in to caching with specific configurations.

GET Route Handlers: Not cached by default, but can opt into caching using static route config options.

Client Router Cache: Page components are not cached by default; the client reflects the latest data on navigation.

Incremental Adoption of Partial Prerendering (PPR)

• PPR Introduction: Combines static and dynamic rendering on the same page, using Suspense boundaries for dynamic UI.
• Static and Dynamic Rendering: Serves static HTML shell immediately, then streams dynamic parts.

Executing Code After a Response with next/after

• after() API: Allows scheduling of secondary tasks (e.g., logging, analytics) to run after the response has finished streaming, without blocking the primary response.

create-next-app Updates

• Updated Design: New design and option to select Turbopack as a bundler in dev mode.

New Next App Initial UI

Optimizing Bundling of External Packages

Bundling External Packages:

• App Router bundles external packages by default, with an opt-out option.
• Pages Router does not bundle by default but allows specifying packages to bundle.
• New option bundlePagesRouterDependencies unifies configuration between App and Pages Router.

Conclusion

Next.js continues to evolve as a powerful and versatile full-stack React framework, providing developers with robust tools and features to create high-performance web applications. The official announcement of Next.js 15 on May 23, 2024, introduces several significant advancements, particularly with support for the upcoming React 19 features and the experimental React Compiler. These updates enhance developer experience by simplifying code management and optimizing performance.

The improvements in hydration error handling and the re-evaluation of caching strategies reflect Next.js’s commitment to addressing common challenges and enhancing default behaviors for better performance and usability. The incremental adoption of Partial Prerendering (PPR) and the new next/after API demonstrate Next.js's dedication to combining static and dynamic rendering seamlessly, ensuring fast and efficient application responses.

The updated create-next-app design and options, along with optimizations for bundling external packages, further streamline the development process, making it easier for developers to start and maintain their projects. Overall, Next.js 15 not only leverages the latest advancements in React but also introduces thoughtful improvements that continue to set it apart as a premier framework for building high-quality web applications.

Reference

https://nextjs.org/blog/next-15-rc#react-19-rc