Blog

What's new in Next.js 13?

At the end of October, Next.js released a new big update - Next.js 13. This blog post will look into all the new features and discuss the changes and improvements.

Table of Contents

• Experimental features (in alpha and beta)
  • app directory
  • turbo pack
  • next/font
• Stable features:
  • next/image
  • improved next/link
  • OG Image Generation
• Conclusion

The new big and shiny update is divided into two main categories: experimental features, released as alpha and beta and not recommended for production usage, and stable features.

Experimental features (alpha/beta)

Let's start with the features you should wait to adapt for your production app, but they will be available soon.

New app directory(beta)

With Next.js 13, the new app directory is introduced. This is a significant mental mode change in how we build websites with Next.js in the future. The main idea behind this new approach is to separate the views that don't need data to render and make them available as quickly as possible to the user. In addition, a loading state for the views that need to fetch data will be available for that part of the page.

This is possible thanks to React Server Components. The app directory will enable us to define layouts that are able to share state across navigations. These UIs are sharable between pages, and they prevent expensive re-renders.

Before Next.js, we used the pages directory. Inside a page, we fetched data and passed it down to components who displayed it. With the app directory, each component itself can get the data it needs individually. This is a massive change, and it will likely lead to significant performance improvements with less JavaScript sent to the client.

Turbopack(alpha)

Next.js 13 includes a brand new bundler: Turbopack. The Next.js team states that it is 700x faster than Webpack. Rust-powered tooling seems to be the fastest these days. What an improvement.

With an application of around 3000 modules, Turbopack takes 1.8s to bundle everything. This incredible speed comes from the fact that it only bundles the minimum assets required in development. In addition, it has out-of-the-box support for Server Components, TypeScript, JSX, CSS, and more.

Remember that it's still in alpha, and many changes will happen. But still, what a fantastic job.

next/font/beta)

Next.js 13 contains a brand new font system, which makes privacy a first-class citizen. With this new font system, all the CSS and font files are downloaded at build-time and self-hosted, along with the other static assets.

This means you can use all the google fonts without having one request to google in your network tab. This is amazing.

The new font system also significantly improves performance by supporting caching and preloading for google fonts and custom fonts. Layout shifts will also be a thing of the past by using the font-display CSS property.

Stable features

Now let's look at the new features you can use right away when upgrading to Next.js 13 stable.

next/image

The new next/image component brings a lot of benefits. The one I like the most is that alt tags are now required, forcing users to apply more care for accessibility.

The new syntax will look like this:

import Image from 'next/image'
import profilePicture from '/images/profile-picture.webp'

const ProfilePage = () => {
  return (
    <Image
      alt="profile picture of Marco"
      src={profilePicutre}
      placeholder="blur"
    />
  )
}

The new image component will also ship less client-side JavaScript and be faster because the native lazy-loading doesn't require hydration. Overall, it's a significant improvement where the Next.js team did a fantastic job in making the image component more accessible and faster.

The Next.js team provided a codemon to make upgrading to the new next/image component easy.

npx @next/codemod next-image-to-legacy-image ./pages

improved next/link

The Next.js team also made some improvements on the next/link component. The component won't require an extra <a> tag anymore. Yay! With Next.js 13, every Link component will automatically render an a tag inside. It's such a small thing, but it will improve the developer experience; I like it.

OG Image Generation

The Next.js Team created a new library to automatically generate social cards, also known as open graph images. The motivation was to offer an easy way to create dynamic social cards. By using Vercel edge functions, it's super fast and easy to use. I'm going to try that out soon.

Conclusion

The Next.js October release brought a lot of minor but helpful improvements and significant changes which will alter major things in Next.js. I'm excited about its future and can't wait to build a new project with the app directory approach.

Sources:

• Smashing Magazine article whats-new-nextjs-13 by Atila Fassina ↗ Opens in new tab
• Next.js 13 release blog post ↗ Opens in new tab

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ Opens in new tab or via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco