Next.js 16 for dummies

Every few months, Next.js drops a new release, and honestly, I usually understand about half of it. For the other half, we comb through the docs until we figure out all the fancy bits and experimental flags.

We created this guide to make some of the more complex aspects of Next.js easier to understand and something I'd actually want to read.

What’s new and shiny

Model Context Protocol (MCP)

Model Context Protocols is a way for Cursor to get fed with useful contextual information. Next.js getting its own MCP is like having a conveyor belt of current best practices fed directly into your IDE. It's slowly but surely removing the human from the loop and ensuring your slop code is a little bit more cohesive and follows the docs.

Fun fact: v0 has done this for a long time; we even wrote a blog post about it.

Next.js MCP can:

• Understand routing, caching, and rendering behavior.
• Unify browser logs and server logs in one place.
• It reads stack traces for you, which literally means that it explains the errors, which means you don't have to spend 20 minutes guessing which error belongs to which requests.
• The AI actually knows the route you are looking at. So instead of vague "something broke," it can say, "your /pricing page exploded because of something right here."

Basically, now you can point an AI Agent in your app and let it diagnose issues, weird behavior, and propose fixes with real context, without you having to do it manually. Don't know about you, but we definitely hate doing this. Here's a list of MCPs we use.

If you're not using 99% of your coding context from MCP alone, you're not doing it right.

Cache components

If you've been around Next.js for long enough, I guarantee you've experienced your website getting cached unexpectedly. You might think it's a design flaw, but it usually occurs for a good reason.

Cache makes everything faster without actually making your code smarter. It basically remembers things. Instead of regenerating the same data or response every time, cache stores it temporarily, so your app can deliver results instantly.

When a user hits a page or API repeatedly, your server doesn’t need to re-run all the logic, database queries, or rendering steps; that stuff is expensive. It simply serves the saved result. That means lower latency, less CPU strain, and happier users.

How to use it?

Just throw a "use cache" at the top of your file, component, or function. Here's where it gets interesting:

• You're in control: Unlike before, caching is now opt-in. You decide what gets cached and what doesn't. No more debugging “ghost pages” that turn out to be from a stale cache from three deploys ago.
• Works everywhere: You can cache only what you need, like pages, components, and functions.
• Automatic keys: The system automatically figures out what to remember, so you don’t have to play “guess the cache key” at 2 a.m.

Or just get us to build it for you.

Configuration

First, enable it in your configuration:

const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Then, use the "use cache" directive in your code:

// File level
'use cache'

export default async function Page() {
  // ...
}

// Component level
export async function MyComponent() {
  'use cache'
  return <></>
}

// Function level
export async function getData() {
  'use cache'
  const data = await fetch('/api/data')
  return data
}

Why it matters

The new cache in Next.js 16 makes performance predictable. It's more of an opt-in with granular control and less of an opt-out with smart defaults.

Website loads instantly because its main parts are cached and don’t change often. Only elements unique to each user, like discounts or saved items, load as needed. This cuts down on server work and internet use, making the site run much faster.

Remember the time you went from casually browsing clothes online to "thanks for your purchase"? Well, that's partly because of a seamless user experience and partly because of a lack of impulse control. Hisss.

Don't blame us

Because it's opt-in, make sure you're always conscious of caching things correctly. We don't want any hate mail about a $10k bill your new intern racked up after reading this.

If you want our hot take, for most developers, I would actually advise against using this, because I've seen your code and I know the slop you write.

Turbopack is enabled by default

Turbopack is the long-awaited bundler that you can use instead of Webpack. What is a bundler? It's like Stonehenge or the Egyptian Pyramids. Nobody knows how they got built, but it's probably some nerd who figured it out somewhere.

Simply put, it complies code.

It's on from day one

In Next.js 16, Turbopack is now the default bundler for all apps. You don't need to set up or configure anything special. It just works, and it's faster.

Numbers to show your boss

5-10x faster refresh

When you make changes to your code, the browser will update them instantly, before you can even sip your coffee.

2-5x faster builds

Production builds that finish before you lose focus. In previous Next.js versions, you had time to stretch, refill your coffee, and reconsider your career choices.

Turbopack file system caching (beta)

Remember how we talked about caching? This is caching at a deeper level. Turbopack now remembers what it's already compiled, so the next time you start your development server, it doesn't have to do all that work again.

How it works?

Think of it like this:

• First time: Turbopack compiles everything and saves it to disk.
• Second time: Turbopack says, "Here's one I made earlier."

The benefits

You’ll notice the difference the moment you start a project. Next.js 16 boots up faster than ever, reducing the wait time drastically. When you make changes, the compiler reacts instantly. You write, save, and see it update.

If you’re working on a massive app with hundreds (or thousands) of files, Turbopack processes and optimizes them instantly. More importantly, it doesn't choke and give you 16-second response times to change pages.

That said, it’s still in beta. Which means we're undoubtedly going to run it on prod for our own website. If you're able to read this, it's working.

Optimized navigation and prefetching

The prefetching is now much smarter. What it does is, when it thinks you might click a link, it starts loading that page in the background before you even click it. So when you do click, boom. It's already there.

Layout deduplication

You no longer need to reload the same layout every time you switch pages. Shared elements, such as headers, sidebars, or navigation bars, remain intact, resulting in smoother transitions and fewer unnecessary re-renders. It’s a small change that’ll make a big difference in how fast your app feels, especially in e-commerce.

Incremental prefetching

Instead of pulling in everything upfront, Next.js now fetches content gradually. You get faster interactions, less wasted bandwidth, and a smarter way to handle data loading.

Faster page transitions

With these optimizations working together, navigating between pages feels nearly instantaneous. There is no lag or any flicker, resulting in just a clean, continuous experience that makes your app feel truly dynamic.

We can’t wait to test this across larger applications. If it holds up the way the release notes suggest, navigation in Next.js might finally feel as smooth as it always looked in the demos.

Improved caching APIs

Simply speaking, you now get precise control over when and how your data cache updates. Instead of guessing when Next.js will refresh something, you can tell it directly. It’s cleaner, predictable, and finally makes cache invalidation feel less like an engineering choice.

More tags

There are two new tags and one tag improvement:

1. revalidateTag() - now with profiles

This function tells Next.js to refresh cached data. Now it's even smarter:

// Use built-in profiles for common scenarios
revalidateTag('blog-posts', 'max');      // Cache for a long time
revalidateTag('products', 'days');       // Cache for days
revalidateTag('comments', 'hours');      // Cache for hours

// Or set a custom time
revalidateTag('user-data', { revalidate: 3600 }); // 1 hour

2. updateTag()

This is brand new and super useful. It lets you update cached data immediately when something changes:

// When a user updates their profile, refresh it right away
updateTag(`user-${userId}`);

3. refresh()

This refreshes only uncached data, leaving your cache alone:

// Refresh data without touching the cache
refresh();

If you’ve ever tried managing cache logic in older versions of Next.js, you know it could be a pain. Half of the time, it was guesswork, and the other half superstition.

Now, with the new caching APIs, you’re in control. Removing all-or-nothing refreshes or overzealous invalidation data nuking. You can revalidate, update, or refresh only what actually needs attention.

Build adapters API (alpha)

A build adapter is like a plugin for your build process. It lets you customize how Next.js prepares your website for the internet. You control how your app gets packaged and deployed, instead of relying on the default “one-size-fits-all” flow. This means you can tailor builds for different environments or platforms, like Vercel, to on-prem setups. It’s still in alpha, but the idea is solid.

Please don't output your Next.js build onto a janky-ass $5 Hetzner VPS.

What can you do?

With build adapters, you can finally shape the build process to fit your stack and not the other way around.

• Adjust how your assets and code are packaged to suit different deployment targets or performance needs.
• Slot in extra tasks before or after the main build.
• Connect your build with CI/CD pipelines, analytics, or external frameworks without hacking around the defaults.

Let's say you want to add specific optimization for a specific hosting platform. Instead of waiting for Next.js to add it, you can create a build adapter to do it yourself.

// This is a simplified example
export const myCustomAdapter = {
  name: 'my-custom-adapter',

  async build(context) {
    // Your custom build logic here
  },
}

You know our opinion: Just use Vercel

React 19.2

You know that React is the library that powers the interactive parts of your website. Version 19.2 brings a handful of upgrades that make building dynamic interfaces faster, cleaner, and a lot less painful.

We’re particularly interested in seeing how these updates play with Next.js 16’s new caching and navigation improvements. If it all clicks (pun intended), we’re looking at smoother state management, fewer rerenders, and cleaner data flows across components.

New stuff

useEffectEvent() - cleaner code

This hook helps you write cleaner code when you need to do something in response to user actions:

import { useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  // This function won't cause the effect to re-run
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createChatConnection(roomId);
    connection.on('connected', () => {
      onConnected();
    });
  }, [roomId]); // Only depends on roomId, not theme
}

You can use values like theme without causing unnecessary re-renders.

View transitions

This makes page transitions smoother and more visually appealing. It's like adding a fade or slide effect between pages automatically. If you want to see a demo of it in action, check this out.

Activity component

This new component lets you hide and show parts of your UI while keeping their internal state:

import { Activity } from 'react';

<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
  <Sidebar />
</Activity>

When you hide the sidebar, it remembers its state. When you show it again, everything is exactly as it was!

Quick comparison

Nerds love tables. Here's one for you.

How to get started with Next.js 16

Ready to upgrade? Here are your options:

Option 1: Automatic upgrade (recommended)

npx @next/codemod@canary upgrade latest

Option 2: Manual upgrade

npm install next@latest react@latest react-dom@latest

Option 3: Start fresh

npx create-next-app@latest

Closing thoughts

Next.js 16 feels like a very good QOL release and polish. It's got lots of functionality to support even wider vendors other than Vercel. It's basically

Better DX, with more compatibility. Ship slop faster than ever before.

We’ve been testing the beta prior to this release on a few projects, and if the early results hold up, Next.js 16 might be the calmest build cycle we’ve had in years. What a time to be alive.

Oh, and if you want to skip learning all of the above, we'll just build it for you. Go get in touch below.