What's New in Nextjs 13!?

Nextjs is a popular React framework for building fast and dynamic web applications. It offers features such as server-side rendering, static site generation, image optimization, code splitting and more. In October 2021, Nextjs released its latest version, Nextjs 13, which introduces some exciting new features and improvements. In this article, we will explore some of the highlights of Nextjs 13 and how they can benefit your web development.

Over the past few months, the Next.js team has been working to integrate Next.js with React Server Components and React 18 features. These new features are now available to try in the new app directory.

app Directory (beta)

One of the most notable features of Nextjs 13 is the app directory (beta), which allows you to create pages with server-side rendering and streaming without writing any client-side JavaScript. This means that you can use React components to define your page layout and data-fetching logic on the server, and send only the HTML to the browser. This reduces the amount of JavaScript that needs to be downloaded, parsed and executed by the browser, resulting in faster performance and better user experience. To use the app directory feature, you need to create a folder named app inside your project root and place your page components inside it. These components should export a default function that returns a React element or a promise that resolves to one. You can also use React hooks such as useState and useEffect inside these components, as well as import other modules from node_modules or your codebase. The app directory feature is currently in beta and requires an experimental flag in your next.config.js file:

module.exports = {
  experimental: {
    appDirectory: true,
  },
};

You can learn more about the app directory feature from the official documentation: https://nextjs.org/docs/advanced-features/app-directory

Turbopack (alpha)

Another major feature of Nextjs 13 is Turbopack (alpha), which is a new Rust-based bundler that replaces Webpack as the default bundler for Nextjs projects. Webpack is a widely used tool for bundling JavaScript modules into bundles that can be served to the browser. However, Webpack has some limitations in terms of performance and scalability due to its JavaScript-based implementation.

Turbopack aims to overcome these limitations by using Rust, a low-level language that offers high performance and concurrency. Turbopack leverages Rust’s native support for WebAssembly (Wasm), which is a binary format that can run on any platform that supports JavaScript. By compiling Rust code into Wasm modules, Turbopack can run faster than Webpack on any device or environment.

According to the Nextjs team’s benchmarks, Turbopack can offer up to 700x faster performance than Webpack for some tasks such as minification and tree shaking. This means that Turbopack can significantly reduce the build time and improve the developer experience for large-scale Nextjs projects.

Turbopack is currently in the alpha stage and requires an experimental flag in your next.config.js file:

module.exports = {
  experimental: {
    turbopack: true,
  },
};

You can learn more about Turbopack from the official blog post: https://nextjs.org/blog/next-13#turbopack-alpha

New next/image

Nextjs has always provided a built-in image component called next/image that helps you optimize your images for different screen sizes and formats. However, next/image had some drawbacks such as requiring custom server configuration or external services for image optimization.

In Nextjs 13, next/image has been redesigned to offer better performance and compatibility with native browser features such as lazy loading. Lazy loading is a technique that delays loading images until they are visible on the screen, saving bandwidth and improving page load speed.

Nextjs 13’s next/image supports native browser lazy loading by default using the loading=“lazy” attribute on <img> tags. This means that you don’t need to use any third-party libraries or plugins to enable lazy loading for your images.

Nextjs 13’s next/image also supports automatic image optimization using Vercel Image Optimization API