Next.js 16 is out and it changes EVERYTHING

Next.js 16 just dropped and there are some critical changes you need to be aware of before updating your apps.

I'm not going to list every single feature like the official blog post. Instead, I'll focus on what actually matters for your day-to-day work.

The CRITICAL breaking change: Everything is async now

This is the change that's going to break your code if you're not careful.

params, searchParams, cookies(), headers(), and draftMode() are now async.

// ❌ This doesn't work anymore
export default function Page({ params, searchParams }) {
  const cookieStore = cookies();
  // ...
}

// ✅ You need to await everything
export default async function Page({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<Record<string, string>>;
}) {
  const { id } = await params;
  const search = await searchParams;
  const cookieStore = await cookies();
  const headersList = await headers();
  // ...
}

Why this change? NextJS wants to be more explicit about what makes your page dynamic. Before, using cookies() would automatically make your page dynamic, which was confusing.

Now, a page is only dynamic if it awaits something dynamic.

Don't panic - there's a codemod

Run this command and it'll handle 90% of the work:

npx @next/codemod@canary upgrade latest

The codemod will automatically add await where needed and update your type definitions.

Turbopack is now the default (and it's FAST)

Remember when Turbopack was experimental? Well, it's now the default bundler in Next.js 16.

I've been using it for a while and I'm going to be honest: it's significantly faster.

• Production builds are 2-5× faster
• Fast Refresh is up to 10× faster
• Already used by 50% of Next.js 15 users

The best part? You don't need to do anything. It's automatic.

If for some reason you need webpack back (for debugging):

next build --webpack

File System Caching (Beta)

For large projects, there's a new experimental feature that caches compilation results on disk:

// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

This means when you restart your dev server, it doesn't recompile everything from scratch. Huge time saver.

New caching APIs that you'll actually use

Next.js 16 introduces a couple of new APIs for cache management that solve real problems.

revalidateTag() now requires a second argument

If you use revalidateTag(), you need to update it:

// ❌ Before
revalidateTag("blog-posts");

// ✅ After - add a cacheLife profile
revalidateTag("blog-posts", "max"); // Max cache duration
revalidateTag("blog-posts", "hours"); // Hour-based cache
revalidateTag("blog-posts", { revalidate: 3600 }); // Custom

updateTag() for immediate updates

New API that invalidates cache AND refreshes immediately. Perfect for Server Actions:

"use server";

import { updateTag } from "next/cache";

export async function updateUserProfile(userId: string, data: any) {
  await db.users.update(userId, data);

  // Invalidates cache and refreshes the UI immediately
  updateTag(`user-${userId}`);
}

This is what you want to use when a user submits a form and you want to see the changes right away.

Important: Node.js 20.9+ is now required

Node.js 18 is no longer supported. You need to upgrade to Node.js 20.9 or higher.

If you're still on 18, you'll need to upgrade before you can use Next.js 16.

What about "use cache"?

There's a new "use cache" directive that lets you cache specific components, but honestly, I'm waiting to see how this plays out in the real world before recommending it.

The idea is you can mark a component with "use cache" and it'll be cached automatically, even if the page is dynamic.

"use cache";

export default async function ProductList() {
  const products = await getProducts();
  return <div>{/* ... */}</div>;
}

You need to enable it in your config:

// next.config.ts
const nextConfig = {
  cacheComponents: true,
};

I'll do a dedicated article on this once I've tested it more thoroughly.

Should you upgrade?

Yes if:

• You want faster builds (Turbopack is worth it alone)
• You're comfortable running the codemod and testing your app
• You're already on Node.js 20+

Wait if:

• You have a large codebase and want to wait for early adopters to find bugs
• You're on Node.js 18 and can't upgrade yet
• You use AMP (it's been removed)

Quick migration checklist

Here's what you need to do:

1. Upgrade Node.js to 20.9+
2. Run npx @next/codemod@canary upgrade latest
3. Fix any remaining type errors (params/searchParams)
4. Update revalidateTag() calls to include the second argument
5. Test your app thoroughly

The codemod will handle most of the work, but you'll still need to manually check a few things.

Conclusion

Next.js 16 is a solid update. The async changes are annoying but necessary, and Turbopack being the default is a huge win.

The main thing? Don't panic. Run the codemod, test your app, and you'll be fine.

If you want to master Next.js and build modern fullstack applications, I have a free training that will help you level up fast: