Next.js 15 Is Here (Vercel Ship Breakdown)

Summary

In this video, the host discusses the latest updates from Vercel's Next.js 15 release, including the new Vercel Firewall, improved feature flags, and the adoption of React 19. The host highlights the React compiler's integration, enhanced debugging for hydration errors, and the overhauled caching system. They also express excitement over incremental static regeneration and the new 'afterUnstable' function, which allows for post-response tasks without delaying the user experience. The video concludes with an overview of the improved 'create-next-app' and the potential of Turbopack, while reassuring Pages Router users that their technology will continue to be supported.

Takeaways

• 🚀 Vercel has introduced a new 'Vercel Firewall' to help mitigate issues with DDoS traffic and caching problems that can occur with Cloudflare as a CDN.
• 🛠️ Vercel is improving its feature flag system to be more secure and integrated deeply into the platform, addressing the issue of feature flags being easily accessible and exploitable by external parties.
• 🔄 Next.js 15 is in release candidate (RC) status, awaiting the official release of React 19, and will bring new features for both client and server-side rendering.
• 🔧 The React compiler, introduced in React 19, is now better supported in Next.js, allowing for easier setup and potentially faster performance without the need for polyfills.
• 👀 Next.js has enhanced hydration error messages, providing clearer diffs when client and server content do not match, aiding in debugging complex hydration issues.
• 🛑 Changes to caching behavior in Next.js include making fetch requests and page components not cache by default, which addresses community concerns about aggressive caching defaults.
• 📦 The introduction of 'afterUnstable' allows for tasks to be queued after a response is sent but before the server instance is terminated, improving handling of post-response tasks like analytics or logging.
• 🌐 Partial Pre-Rendering (PPR) can now be adopted incrementally on specific routes, allowing for a mix of static and dynamic content to be served based on route-specific needs.
• 🏗️ 'create-next-app' has been overhauled with a cleaner and more minimal template, making it less overwhelming for new developers starting with Next.js.
• 🔄 Turbopack, an experimental feature, is now more accessible through 'create-next-app', aiming to improve the development experience by potentially replacing Webpack in the future.
• ⚡️ Vercel is caching V8 bytecode to improve cold start performance when using Next.js in serverless environments, potentially offering better performance than AWS Lambda.

Q & A

What is the main focus of the video script?

The video script focuses on discussing the recent updates and announcements from Vercel's 'Ship It' event, including Next.js 15, Vercel Firewall, and improvements to feature flags and caching.

What is the Vercel Firewall and why is it needed?

The Vercel Firewall is a feature that allows users to set up rules to protect their websites from traffic attacks that could potentially crash the site and cause high costs. It is needed because relying solely on Cloudflare for such protection can cause caching issues.

Why is the feature flag system being rethought in Vercel?

The feature flag system is being rethought in Vercel to address security vulnerabilities, where internal feature names could be exposed and manipulated by external parties, potentially revealing features that should not be public.

What is the significance of Next.js 15 being an RC (Release Candidate)?

Next.js 15 being an RC signifies that it is almost ready for official release, but its release is currently blocked by the pending official release of React 19. It will be officially released shortly after React 19 is released.

What are the benefits of the new React compiler in Next.js 15?

The new React compiler in Next.js 15 allows for better optimization of code, making it faster and more efficient. It also simplifies the setup process, requiring only configuration changes without the need for code modifications.

How has the error reporting for hydration issues been improved in Next.js 15?

In Next.js 15, error reporting for hydration issues now includes actual diffs, showing the specific differences between the client and server rendering, making it easier for developers to identify and fix hydration errors.

What changes have been made to caching defaults in Next.js 15?

Next.js 15 has overhauled its caching defaults, removing aggressive caching behaviors that were not well-communicated or understood. It now requires explicit opt-in for caching, making it more transparent and user-friendly.

What is partial pre-rendering and how does it benefit performance in Next.js 15?

Partial pre-rendering is a technique that allows certain parts of a webpage to be cached and served quickly, improving the initial loading time. In Next.js 15, it can now be adopted incrementally on specific routes, allowing for a mix of static and dynamic content.

What is the purpose of the 'afterUnstable' feature in Next.js 15?

The 'afterUnstable' feature in Next.js 15 allows developers to perform tasks after a response has been sent but before the server instance is terminated. This is useful for logging, analytics, or other post-response tasks without blocking the user's request.

What updates have been made to 'create-next-app' in Next.js 15?

In Next.js 15, 'create-next-app' has been overhauled to provide a cleaner and more minimal template, reducing the amount of initial code and making it less overwhelming for new developers.

What is the current status of Turbopack in Next.js development?

Turbopack is still in development and is not yet ready for production use. It is being improved incrementally and is now an option during the 'create-next-app' setup process. However, it is expected to become the default in future releases.

How does the new server external package config option in Next.js 15 affect performance?

The new server external package config option in Next.js 15 allows for the bundling of external packages on the server, which can improve performance by reducing the number of network requests and synchronization issues.