3 min read

My Favorite Next.js 15 Features You Should Be Using

Mehdi
Author

Are you ready to supercharge your React development? Next.js 15 has landed, and it's packed with features that'll make you wonder how you ever built apps without them. Next.js 15 is officially stable and ready for production, bringing a host of improvements that'll transform your development experience.

Let's dive into the features that have me genuinely excited about the future of Next.js development. Trust me, by the end of this article, you'll be itching to upgrade your projects.

What Makes Next.js 15 a Game-Changer?

Next.js 15 isn't just another incremental update – it's a significant leap forward. This release builds on the updates from both RC1 and RC2. We've focused heavily on stability while adding some exciting updates we think you'll love. The team has been laser-focused on three key areas: performance, developer experience, and future-proofing your applications.

What really sets this release apart is how it balances innovation with stability. While introducing cutting-edge features like React 19 support and a stable Turbopack, the team has been careful to provide migration paths and backward compatibility where possible.

Lightning-Fast Development with Turbopack

Here's where things get exciting. Remember those coffee breaks you used to take while waiting for your development server to start? Well, you might need to find a new excuse.

Why Turbopack is Finally Ready for Prime Time

It's been a long road, but we are happy to announce that next dev --turbo is now stable and ready to speed up your development experience. Turbopack has graduated from experimental to stable, and the performance gains are genuinely impressive.

The secret sauce? Turbopack parallelizes work across multiple CPUs, whereas with webpack, only the TypeScript / JavaScript transformation step using SWC is parallelized. This architectural advantage means better performance across the board, especially on modern multi-core machines.

Up to 76% Faster Development Experience

Let's talk numbers, because they're pretty incredible. Vercel reports that they were able to achieve up to 76.7% faster server startup in the development environment with their own Next.js app. But it gets better – during development, they also achieved up to 96.3% faster code updates thanks to the optimized Fast Refresh.

Think about what this means for your daily workflow. Those moments when you're in the flow state, making rapid changes and seeing instant feedback? Turbopack makes those moments smoother and more frequent.

To enable Turbopack in your project, simply add the --turbo flag:

next dev --turbo

Or update your package.json:

{

"scripts": {

"dev": "next dev --turbo"

}

}

Embracing the Future with React 19 Support

One of the most significant updates in Next.js 15 is its embrace of React 19. This isn't just about staying current – it's about unlocking new possibilities for your applications.

What React 19 Brings to Your Next.js Projects

As part of the Next.js 15 release, we've made the decision to align with the upcoming release of React 19. The integration is thoughtful and practical. For App Router users, you get React 19 RC out of the box, while Pages Router users can stick with React 18 and upgrade when ready.

React 19 introduces several game-changing features:

Actions API: Simplified form handling and server interactions

Enhanced Server Components: Better performance and developer experience

Improved hydration: Fewer hydration mismatches and better error handling

New hooks: Like useActionState and useOptimistic for better state management

Experimental React Compiler Integration

Here's where things get really interesting. The React Compiler is a new experimental compiler developed by the React team at Meta. It leverages its understanding of plain JavaScript semantics and the Rules of React to analyze and optimize your code.

What does this mean for you? This deep understanding enables the compiler to automatically apply optimizations, reducing the need for manual memoization techniques like useMemo and useCallback. Your code becomes simpler, and your apps become faster without you having to think about it.

To try the React Compiler (use with caution in production):

1const nextConfig = {
2 experimental: {
3 reactCompiler: true,
4 },
5};
6module.exports = nextConfig;

Important Breaking Changes You Need to Know

Let's address the elephant in the room. Yes, Next.js 15 includes some breaking changes, but they're designed to make your apps faster and more maintainable in the long run.

New Asynchronous Request Handling

We are transitioning APIs that rely on request-specific data—such as headers, cookies, params, and searchParams—to be asynchronous. This might seem like extra work, but it's actually setting the stage for significant performance improvements.

The old way:

1import { cookies } from 'next/headers';
2
3export function AdminPanel() {
4 const cookieStore = cookies();
5 const token = cookieStore.get('token');
6 // ...
7}

The new way:

1import { cookies } from 'next/headers';
2
3export async function AdminPanel() {
4 const cookieStore = await cookies();
5 const token = cookieStore.get('token');
6 // ...
7}

Why this change? In traditional Server-Side Rendering, the server waits for a request before rendering any content. However, not all components depend on request-specific data, so it's unnecessary to wait for the request to render them.

Simplified Caching Semantics

With Next.js 15, we're changing the caching default for GET Route Handlers and the Client Router Cache from cached by default to uncached by default. This change makes caching behavior more predictable and easier to reason about.

Don't worry – if you want to keep the old caching behavior, you can still opt into caching explicitly. This change gives you more control over when and how caching happens in your application.

Enhanced Developer Tools and Features

Next.js 15 introduces several features that make development more enjoyable and productive. Let's explore the ones that'll make your daily coding experience better.

Visual Route Optimization Feedback

Ever wondered whether your routes are being rendered statically or dynamically? Next.js now displays a Static Route Indicator during development to help you identify which routes are static or dynamic. This visual cue makes it easier to optimize performance by understanding how your pages are rendered.

This simple addition can be a game-changer for performance optimization. Now you can see at a glance which routes might benefit from static generation and which ones need to be dynamic.

Better Form Handling with next/form

Forms are everywhere in web applications, and Next.js 15 makes them better with the new next/form component. Enhanced Forms (next/form): Enhance HTML forms with client-side navigation.

This component provides a seamless way to handle form submissions with client-side navigation, giving you the best of both worlds: the simplicity of HTML forms with the smooth experience of a single-page application.

Native TypeScript Support for Configuration

TypeScript developers, rejoice! next.config: TypeScript support for next.config.ts. You can now write your Next.js configuration files in TypeScript, getting full type safety and IntelliSense support.

1import type { NextConfig } from 'next';
2
3const nextConfig: NextConfig = {
4 experimental: {
5 turbo: true,
6 },
7};
8
9export default nextConfig;

Powerful New APIs for Modern Development

Next.js 15 introduces several new APIs that open up new possibilities for how you build and optimize your applications.

Execute Code After Response Streaming

The new after() API is fascinating. unstable_after API (Experimental): Execute code after a response finishes streaming. This allows you to perform tasks like logging, analytics, or cleanup operations without blocking the response to the user.

Think about it – you can now send the response to your users immediately while handling background tasks asynchronously. This is perfect for things like:

Sending analytics data

Updating caches

Performing cleanup operations

Logging user actions

To enable this experimental feature:

1const nextConfig = {
2 experimental: {
3 after: true,
4 },
5};
6export default nextConfig;

Stable Server Lifecycle Observability

instrumentation.js API (Stable): New API for server lifecycle observability. This API, which was previously experimental, is now stable and ready for production use.

The instrumentation API gives you hooks into the server lifecycle, allowing you to set up monitoring, tracing, and observability tools. This is crucial for understanding how your application behaves in production and identifying performance bottlenecks.

Seamless Migration with @next/codemod

One of my favorite aspects of Next.js 15 is how the team has made upgrading as painless as possible. They've learned from previous releases and built tooling to help you migrate.

One-Command Upgrade Experience

@next/codemod is a CLI tool that helps to automate our upgrading and breaking changes with every major Next.js release. This tool helps you upgrade your codebase to the latest stable or prerelease versions.

The upgrade process is now as simple as:

npx @next/codemod@canary upgrade latest

This command will:

Update your dependencies to the correct versions

Show you available codemods for breaking changes

Guide you through applying necessary transformations

Provide detailed feedback on what changed and why

It's like having a migration assistant that understands your codebase and can make the necessary changes automatically.

Enhanced Security for Production Apps

Security isn't just a feature – it's a fundamental requirement for modern web applications. Next.js 15 introduces several security improvements that you'll appreciate.

Unguessable Endpoints and Better Security

Server Actions Security: Unguessable endpoints and removal of unused actions. This improvement makes your Server Actions more secure by default, reducing the attack surface of your application.

The framework now automatically generates unguessable endpoints for your Server Actions and removes unused actions from your production bundle. This means better security without any extra work on your part.

Improved Development and Build Tools

Next.js 15 brings several improvements to the development and build process that make your workflow smoother and more efficient.

Latest Linting Standards

ESLint 9 Support: Added support for ESLint 9. Staying current with linting tools helps catch bugs early and maintain code quality. The upgrade to ESLint 9 support ensures you can use the latest linting rules and improvements.

The migration is handled gracefully – If you upgrade to ESLint 9, and we detect that you haven't yet adopted the new config format, Next.js will automatically apply the ESLINT_USE_FLAT_CONFIG=false escape hatch to ease migration.

Better Control Over Cache Headers

For those self-hosting their Next.js applications, Self-hosting Improvements: More control over Cache-Control headers is a welcome addition. This gives you more granular control over how your application handles caching when deployed to your own infrastructure.

Why You Should Upgrade to Next.js 15 Today

After exploring all these features, it's clear that Next.js 15 represents a significant step forward for React development. The combination of performance improvements, developer experience enhancements, and future-proofing features makes it a compelling upgrade.

The performance gains from Turbopack alone make the upgrade worthwhile for most projects. When you add the React 19 support, improved developer tools, and enhanced security features, you get a framework that's ready for the next generation of web applications.

Sure, there are breaking changes to consider, but the migration tools and documentation make the transition as smooth as possible. The Next.js team has clearly learned from previous releases and prioritized making upgrades less painful.

Should you upgrade immediately? If you're starting a new project, absolutely. For existing projects, I'd recommend testing the upgrade in a development environment first, but the benefits are significant enough to make it worth the effort.

The future of web development is here, and it's built on the solid foundation that Next.js 15 provides. Your users will appreciate the performance improvements, your development team will love the enhanced developer experience, and you'll sleep better knowing your application is built on the latest, most secure foundation.

Share this article