Next.js 13 Explained: A Mile High Look At Each New Feature

If you already work with Next.js, then you'll know that there were a lot of cool features recently announced for Next.js 13.

The core focus? Speed and lots of it!

We're so excited by all these changes that we recently hosted a private AMA with the ZTM community and our resident Next.js expert, Ankita Kulkarni, for a live chat to look at everything awesome coming in Next.js 13, and to help break down what it all means, and more.

In today's guide we're going to share some of the highlights of that call, so you can learn the most important features in the pipeline.

Editor’s note:

We’re going to talk about a bunch of cool stuff coming so definitely feel free to test all this out but don’t get too excited and push this live on your app just yet... otherwise it might break! Next.js 13 is still experimental so it shouldn't yet be used in production apps. The community is still working on it and improving it. You've been warned. Once Next.js 13 is stable, our Complete Next.js Developer bootcamp course will be fully updated with all the latest Next.js 13 goodies!

With that out of the way, let’s dive into some of these upcoming changes…

New feature: Next/link

The first feature that Ankita talked about is an improvement to an existing process that you're probably currently using. Basically, the Next/link feature allows us to no longer need the anchor tag inside of a link component.

Why care? Well previously you would add anchor tags <a> as a workaround to make links SEO compatible, like so:

But this new Next/link feature allows links to work without having to add it, so we get a nice quality of life change.

It’s a small thing but they all add up to less time at the keyboard 😀

New feature: Next/image

If you’re already using the current version of Next.js, then you’ve probably seen faster load times, higher Core Web Vital scores and improved user experience, all thanks to how Next.js currently handles image loading.

Faster load times are always great and with that in mind, Next.js 13 is taking that a step further with its new Next/image feature.

Designed to reduce layout shift and provide faster loading, thanks to less client-side Javascript.

TL;DR

All this means is simply less time waiting for elements to load, and less movement of them as the page builds. (Because there’s nothing worse than a slow load time or clicking on the wrong thing because it moved right!?)

Better still, because these Core Web Vitals are becoming a more important ranking factor in SEO, it means we can both improve user experience and increase potential traffic for a win:win feature!

Nice and simple so far, but let’s have a look at some of these more experimental alpha and beta changes and what they mean.

New feature: Turbopack (alpha)

Another feature designed to improve user experience as well as optimize and improve your application. Turbopack is the new Rust based successor to Webpack, and is incredibly fast at loading applications with a large number of modules.

Next.js has been consistently improving load speeds, but with this focus on native bundling, they can load an app with 3,000 modules in 1.8 seconds, which is a considerable difference from Next.js 12 at 6.3 seconds.

Compare that again to Vite or Webpack, and you’re looking at 700x faster than Webpack, and 10x faster than Vite!

Turpoback achieves these speeds thanks to its architecture and the fact that it caches so that it never has to do the same work twice. This means it will only re-run if functions change, allowing you to skip a lot of runtime.

TL;DR

There’s no noticeable difference to the end user UI appearance, but there will be a very noticeable difference in build/load time.

New Feature: App directory (beta)

If you’re currently using Next.js, then you’re probably using the Pages directory most of the time.

However, in Next/js 13, we now have a new app directory that we can use instead:

You can add this directory by heading over to next.config.js, and then adding in

experimental: { appDir: true }

Editor's note: Again though, this is very much experimental so we don’t advise pushing to a live app, but it's still fun to play around with.

This new directory provides support for:

• Layouts
• Server components
• Streaming, and
• Async Data Fetching

Let’s break each of these down.

Improved: Layouts and routing

Layouts were actually improved with Next.js 12, but the routing is different in Next.js 13.

The improved layouts and routing is another quality of life change that also improves site speed and load. The main changes here are to do with layout architecture, allowing us to nest layouts and colocate application code.

It sounds complex but basically this all works together to maintain state across navigation and avoid re-rendering and improving load times. Huzzah!

To try this out, once you have the experimental app directory code installed, you simply create a page.js file inside of the app directory: app/page.js.

You can then define those layouts throughout the file system, and share UI across multiple pages.

Improved: Server components

The new app directory also gives support for React’s new server side architecture, which means that we can improve load speed by removing unnecessary components from the client side browser:

And instead, have them load server side for less front end runtime.

This way, the client side can be improved and cached so that it always loads a predictable size, and even better still, it doesn’t increase as the application grows and scales.

New feature: Streaming

Another speed and user experience improvement. With streaming you can improve load times by instantly rendering parts of the page that are either cached or don’t need to update, and then loading the parts of the page that are fetching new data.

For example

This could be static content on a blog page perhaps, with adverts and calls to action loading dynamically on the sidebar, etc.

It doesn’t matter what you use it for though. Streaming will help you to improve page load times!

Improved: Data fetching

Finally we have another quality of life change with an update to both data fetching and handling promises with components.

// app/page.js

async function getData() {

  const res = await fetch('https://api.example.com/...');

  // The return value is *not* serialized

  // You can return Date, Map, Set, etc.

  return res.json();

}

// This is an async Server Component

export default async function Page() {

  const data = await getData();

  return <main>{/* ... */}</main>;

}

Not only does the new update deduplicate fetch requests, it allows us to use one single way to fetch, cache and revalidate.

Simply put, we can now use Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) all from the same API, as well as fetching data from inside pages and components!

Next.js 13 is going to be incredibly fast

I don’t know about you, but we’re incredibly excited for all these updates to come out of beta and go live.

In fact, Ankita is holding off on making her next Next.js course update until we can bring you the most up to date training on the topic when all these features are available in a stable version.

That being said, once these features officially live, Akita will be updating the course which will be automatically updated for all active ZTM members.

In the meantime, if you want to improve your understanding or even get started with Next.js, build your own Netflix clone and create other amazing projects, then go ahead and check out Ankita’s Next.js Developer course today.

You can learn everything you need to know to be hired as a top 10% Next.js Developer with the current version, and then be secure in the knowledge that you’ll know everything you need as you transition into Next.js 13.