Last checked and updated on 01 Jun 2026
What Is New in Next.js 13 (summary table)
Next.js 13 introduces foundational upgrades focused on performance and developer experience. The major updates include a new app router, a faster bundler, and enhanced components.
| Category | Key Changes |
|---|---|
| Core Architecture | New app/ directory (beta) with React Server Components, Streaming, and Layouts. |
| Tooling | Turbopack (alpha), a Rust-based successor to Webpack for faster updates. |
| Components | New next/image component, new next/font (beta), and updated next/link. |
| Rendering & Data | Async Components and extended fetch API for simpler data fetching. |
How does the new App Router improve my Next.js projects?
The new app/ directory (beta) rethinks how you build applications. It uses React Server Components by default, which allows you to render components on the server and reduce client-side JavaScript. This matters because it leads to faster initial page loads and improved Core Web Vitals.
Key Features of the App Router
- Layouts: Persistent UI that doesn't re-render between navigations, with nested routing support.
- Streaming: You can progressively stream UI from the server using React Suspense boundaries.
- Simplified Data Fetching: Use async/await directly in Server Components with the extended
fetchAPI that provides automatic caching and deduping.
In practice, this model gives you more granular control over rendering and data flow. It's a shift towards a more server-centric architecture, which is a common evolution in full-stack JavaScript frameworks.
What performance gains does Turbopack offer over Webpack?
Turbopack is a new incremental bundler written in Rust, announced as alpha for development. It's designed to be significantly faster than Webpack, especially in large applications. Initial benchmarks show updates up to 700x faster in some cases.
It's built on Turbo, the same engine powering the incremental build system in Vercel's projects. The speed comes from only bundling the minimum required assets for a development update. For now, it's opt-in and only supports development mode, not production builds.
This is a big deal for developer velocity. Waiting for a dev server to update is a common bottleneck in the Node.js ecosystem, and Turbopack aims to eliminate it.
How are core components like Image and Link improved?
Next.js 13 refines several built-in components to require less configuration and client code. The next/image component has been rewritten to use the native HTML <img> tag by default, which reduces client-side JavaScript overhead. It now has better alignment with web standards.
The next/link component no longer requires a child <a> tag. You can simply pass the href and children directly to the Link component, making the code cleaner and less error-prone.
Additionally, next/font (beta) automates font optimization. It automatically subsets custom fonts and serves them from your own domain, removing external network requests and improving privacy and performance.
FAQ
Is the new `app` directory stable, and should I migrate my existing project?
The app/ directory is in beta. It's a stable foundation for new projects, but the API might have minor changes. For existing large projects, it's recommended to experiment gradually or start new features with it. The original pages/ directory continues to be fully supported.
Do I have to use React Server Components in the new app router?
Yes, components inside app/ are Server Components by default. This is a core part of the architecture. However, you can still use Client Components for interactivity by adding the 'use client' directive at the top of a file.
Can I use Turbopack in production today?
No. Turbopack is currently in alpha and only available for next dev (development mode). Production builds still use Webpack and other proven tooling. It's for speeding up local development only at this stage.
How does the new `next/font` work with Google Fonts?next/font will download your specified Google Fonts at build time and host them as static assets alongside the rest of your application. This means no browser needs to make a request to Google's servers, improving speed and privacy.
What happens to my existing `next/image` usage when I upgrade?
The old component remains available under a legacyBehavior prop or via a separate import to ensure backward compatibility. You'll get a codemod to help migrate, but you can update at your own pace. The new default is simpler and more performant.