← Blog
#Next.js#TypeScript#Frontend#Performance#Developer Tools

Next.js 16 Beta and Turbopack — Developer Experience Takes a Real Step Forward

webhani·

Next.js 16 Beta is out with Turbopack as the default bundler. Typed Routes and Route Export Validation also reach stable status in this release. These changes affect the day-to-day mechanics of building Next.js applications — build speed, type safety, and configuration correctness.

Turbopack as Default

Turbopack is a Rust-based bundler developed by Vercel as a long-term webpack replacement. It was an experimental opt-in through Next.js 15; starting with Next.js 16 Beta, it's on by default.

The headline benchmark is up to 700x faster on large codebases. In practice, the gap is most noticeable as a project grows. The key difference isn't just raw speed — it's that Turbopack's build times scale much more gradually with codebase size.

# webpack (Next.js 15) on a large project
$ next dev
  Ready in 8.3s
 
# Turbopack (Next.js 16) on the same project
$ next dev
  Ready in 0.9s

HMR is also faster — changes propagate to the browser in milliseconds rather than seconds on complex component trees. This compounds: faster iteration during development adds up across a full workday.

TypeScript Improvements

Two TypeScript features move from experimental to stable in Next.js 16.

Typed Routes

Enable it in next.config.ts:

import type { NextConfig } from "next";
 
const config: NextConfig = {
  experimental: {
    typedRoutes: true,
  },
};
 
export default config;

With this enabled, href props on Link components are type-checked against your actual route structure:

// ✅ Valid route — compiles
<Link href="/blog/my-post">Read more</Link>
 
// ❌ Typo in route — compile error
<Link href="/blg/my-post">Read more</Link>

Internal link typos are a real but easy-to-miss class of bugs. Catching them at compile time is a concrete improvement for teams where multiple developers are adding routes.

Route Export Validation

Page files now validate what they export at build time:

// app/blog/[slug]/page.tsx
 
// ✅ Valid exports
export default function Page() { ... }
export async function generateStaticParams() { ... }
 
// ❌ Invalid export — build error
export const someRandomExport = "value";

This prevents misconfigured route files from silently passing builds and causing runtime issues.

Migration Path

The upgrade from Next.js 15 to 16 is straightforward for most projects:

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

The main thing to verify is custom webpack configuration. Not all webpack plugins are Turbopack-compatible. If your project relies on custom webpack loaders or plugins, check compatibility before upgrading:

// next.config.ts
const config: NextConfig = {
  // Turbopack is on by default in Next.js 16
  // Custom webpack config still works but only applies when webpack is used
  webpack: (config) => {
    // These only apply in webpack mode (e.g., next build with --no-turbopack)
    return config;
  },
};

Our Take

The practical value of Turbopack as default is reducing the "waiting for the dev server" problem before it becomes a complaint. Projects that adopt Next.js 16 from the start won't accumulate the tech debt of slow builds; projects migrating from 15 should evaluate whether their webpack customizations create blockers.

Typed Routes addresses a real pain point: broken internal links that are invisible until runtime. Adding compile-time coverage for route correctness fits the TypeScript ecosystem's general direction of catching errors earlier.

For production Next.js 15 projects, wait for the stable 16 release before migrating. For new projects or internal tooling, the beta is worth testing now.

← Back to Blog