Next.js 13 was recently released at the Next.js conference. Many new features are included, including new routing, a new way to fetch data (React suspense), Vercel fonts, og image generation, layouts, and more.
These new features have the potential to be game changers, and they promise to be extremely fast. But not without consequences.
Let’s go into more detail about them.
Turbopack: The successor to Webpack.
Turbopack, the brand new build tool led by the creator of Webpack, Tobias Koppers, will be the Web’s next-generation bundler. Rust was used to construct it from the ground up. It incorporates turbo repo in order to cache duplicate operations. Turbopack is extremely fast.
It updates large applications 10x faster than Vite and 700x faster than Webpack. On larger applications, the difference is even greater — Vite is frequently 20x faster. It has built-in support for Server Components, TypeScript, JSX, CSS, and other technologies.
However, it is currently in alpha, which may make migration difficult for existing apps due to webpack’s vast ecosystem of plugins.
A NEW NESTED ROUTING SYSTEM
Next.js 13 includes a new file-system-based router built on React Server Components, which supports layouts, nested routing, loading states, error handling, and other features. This opens up new possibilities and improves the framework’s overall performance.
The /app directory (currently beta – at the time of writing) includes support for the following:
- Layouts: Easily share UI while preserving state and avoiding re-renders.
- Server Components: Making server-first the default for the most dynamic applications.
- Streaming: Display instant loading states and stream in updates.
- Suspense for Data Fetching: The new use hook enables component-level fetching.
The /app directory can coexist with your existing pages directory for incremental adoption.
The new app directory retains file system-based routing, but it is now entirely directory-based, with a variety of naming conventions for different use cases. To make a page, you give the route’s direct name. js file to it, which exports the component you want to display there in a nice and simple way.
However, because it is a directory, we can co-locate additional components here rather than creating a separate components directory or following some other convention.
Top comments (0)