What’s New in Next.js 13?
Table of Contents

What’s New in Next.js 13?

Aleksander Jess
Senior Content Marketer & Technical Expert

Summary

  • Next.js brings us layouts, Turbopack, and many more goodies, including the dramatic reduction of client-side JavaScript;
  • The new approach to structuring your Next.js apps is opt-in, and can be adopted incrementally, for a smooth adoption;
  • New features will make developing performant web apps easier;
  • Next.js 13 comes with Server Components enabled by default;
  • Is Next.js 13 worth the upgrade? Yes.

On the 25th of October, people all around the world tuned in to watch Next.js conf – the conference where developers found out what the developers of the most famous React framework prepared for them. All who turned up for the stream or the in-person event witnessed the presentation of the next major version of the framework – Next.js 13. The view was quite something – the new version is much different in many ways than its predecessor. It changed so much in so many ways – the company itself claimed the update will be the biggest change to Next.js ever. Was it? We watched the full conference for you, but if you want to watch it yourself first, you may find the video below. Otherwise, read on.

Lastly, Vercel, called the new version “dynamic without limits.” This perhaps refers to the removed limitations connected to the app sizes. Previously, you had to choose carefully what you enabled your users to do, and what not to do, as new possibilities often meant more and more data users had to pull. Now, that worry is not at the back of developers' head anymore: websites will remain fast unless you make them slow, and heavy on purpose.

The New Way to Build Next.js Apps

Some Context

Reinventing React was the topic of recent months. The topic? Fetching data and removing the tons of JavaScript we ship to users around the world. For one, it made users’ experience much worse. Moreover, it had an adverse effect on Earth – all data sent across the internet = emitted carbon (perhaps reducing emissions is just a side-effect, though it’s sure a nice outcome). Another problem was the problem of waterfall fetching. In short, instead of fetching data in parallel, browsers fetched data in sequence (one after another).  

The first React framework (or the first mainstream framework) to solve the problem of both waterfalls, and too much client-side JavaScript (both at the same time) was Remix. It became an internet hit. The creation of the React Router team was web-standards first, and enabled developers to create React websites that were lighter and rendered quicker on top of that. Another selling point was the unique approach to fetching data, but that’s another story, for another article.

Remix’s approach was picked up by the Next.js team, and in May 2022, they have announced requested feedback on their new proposal: “Layouts”. The change was called the biggest one to date, and it sure was. A big portion of why developers all around the globe waited  

Pages vs App

The groundbreaking features that Next 13 brings are entirely opt-in. We are not sure for just how much longer the legacy, and the new approach will be supported at the same time, though at the time of writing they are.  

Putting your code in the pages folder is the old way of writing full-stack apps you know and are used to. Nothing changes about the core process here, and if you want to stick to the old ways, then you may skip this section, and move to the “Turbopack” one.

If you are ready for the new (and slightly untested), put your code in the app directory, and read on. Vercel promised a dramatic reduction in client-side JavaScript... and they delivered! Previously, a simple “Hello, World” app would require sending over 70kB of data just to have a div. Now, if you don’t need interactivity, the only thing we get is HTML, and CSS. No JS WHATSOEVER. Of course, if you need interactivity, JS will appear, and we are not talking about the full React + Next package.  

Loading States, Layouts

The worst part of the web experience is waiting for something to load while having nothing to look at. One talk during the presentation of React 18 already mentioned that and touched on the importance of introducing loading states with Suspense.

Next.js 13 delivers an improved version of the mechanism. You may now create a function called “Loading” that users will see until data fetching for your page is complete.  

The upgraded Layouts solve the problems of all Next releases up to date. Previously, creating reusable foundations for pages was slightly problematic. One had to use a quick and a somewhat improvised way to go about things, but not anymore. We may now create a file called “layout.tsx” that components will use to build a user interface.

Server Components

Server Components enable massive savings in the bundle size. They are a bit of a shakeup in the front-end world as well. React used to be a client-side library only. As we wrote before, that changed recently, with the addition of this new type of a building block. Next.js now uses them, and uses them by default to help you make faster apps.  

The new components might make GraphQL and other libraries even more popular. How so? GraphQL is heavy. @apollo/client is ~42kb by itself (minified; version 3.7.1). If you now keep everything on the back-end, then no single byte is included in the client bundle. For smaller teams there is a benefit as well. You may now even call Prisma directly inside your components (even though you don’t really want to do that).

There are a few drawbacks, however.

Many third-party components will have to be wrapped in a component that will tell Next that it’s a client component. It’s a bit of additional work; busy work that nobody likes. You are not able to add any interactive elements, too. To do that, you must use Client Components.

Furthermore, calling fetch from Client Components is not supported currently. As the docs say:

fetch is currently not supported in Client Components. Although it is possible to fetch data in Client Components by, for example, using a third-party library such as SWR, you might run into performance issues when doing so.

Streaming

Traditionally, users had to wait for all the page to generate before they received any of it. Not anymore. Server will now send the UI to the client in small bits, as they get created. This means larger chunks will not block the lighter ones. Of course, this feature is currently supported only in the app directory, and it does not seem as if it might change.  

People with fast Wi-Fi or with access to a good internet connection aren’t going to benefit from this new addition as much as the ones with slower connections. There are more people like this than you would have thought. It’s great that we may now improve the experience for them – they may be customers you could have had if your webpage loaded faster.

Turbopack

Turbopack is the successor to Webpack. Vercel, having hired Webpack’s creator, had the possibility to write a faster, better tool than Webpack. It’s much faster, that’s certain, though it’s not all great. For one, you now have to author plugin using Rust, instead of JavaScript. The subset of JavaScript developers having working knowledge of the systems language is much, much smaller, than the set of JS devs.  

That’s a trade-off, though. We now have a tool that’s lightning fast and will heavily decrease build times for large apps. The change is aimed at enterprises. For small teams, the change is nice, but won’t change much, realistically. Enterprises will now build their apps in a much shorter time and having to hire Rust developers is not a big deal for them.  

Furthermore, developers’ favorite, Tailwind CSS, does not really work with Turbopack now. It was a big misstep from the bundler’s creators, though we don’t think it won’t be remedied soon.

The speed

Turbopack is blazingly fast. We are not sure whether the trade-off of faster vs losing many existing plugins is worth it in the end. It also remains a question why the development team behind the framework did not choose to use Vite. Surely, some of the existing Webpack plugins will be made compatible with Turbopack, though Vite has a sea of them already, AND it’s blazingly fast as well. A bundler monopoly is not something anybody wants, on the other hand.

New next/image, @next/font, and improved next/link

There are new packages coming your way, that will make your images & fonts load faster, as well as some improvements to how links work in Next.js 13. They work the same in the app and the pages directory.

next/image

The new helper is designed to make pictures load even faster. This release brings us some improvements. Firstly, it now helps you to speed up the Largest Contenful Paint (LCP). LCP is the largest element one sees on a page. If it’s an image, then Next.js will tell you to add a special priority attribute to the picture, so the framework can prioritize the loading of said block.  

From other noteworthy additions, now the alt attribute is required, which means you will have to add it to all your images. Quite frankly, you should have done that already, so that is a non-issue.

@next/font

Fonts are some of the heaviest things to load on a site. Vercel teamed up with the Chrome team to deliver the best experience. The library allows you to load fonts from Google (downloaded at build time) or load local fonts, from your server. In case you worry loading fonts from the company from Mountain View will expose your users, worry not. Users don’t connect to the servers of the search engine company at all.

next/link

The solution for enabling client-side navigation has changed a bit. As the documention says:

The <Link> Component no longer requires manually adding an <a> tag as a child. This behavior was added as an experimental option in version 12.2 and is now the default. In Next.js 13, <Link> always renders <a> and allows you to forward props to the underlying tag.

@vercel/og

Setting a dynamic Open Graph (OG)/Twitter image used to be a challenging task. There was a repository on GitHub, courtesy of Vercel, where the task was made significantly easier for you. All you had to do was clone the code, make changes, deploy the service, and, in a few hours, you were done. Now, you may be done in less than an hour.  

The way it works is you create a React component, which is then transformed into an image. Sounds simple, and it is. There are some limitations as to what CSS properties are supported, though don’t worry about that one bit. The possibilities are still wide open for you to create stunning OG images

Breaking Changes & Migration

We will start with the one breaking change everybody is happy to see. INTERNET EXPLORER ISN’T SUPPORTED ANYMORE 🎉.

Further, what you need to keep in mind is:

  • The minimum version of React is now 18.2.0, up from 17.0.2. If you need a refresher of what version 18 changed, look here;
  • We said goodbye to Node 12, so you need to upgrade your containers/change your environment, and (at least) embrace Node 14;
  • Minifying by SWC is the new default;
  • The next/image you were used to is now next/legacy/image. To migrate to the new next/image run the codemod;
  • The new next/link automatically adds an achor tag, where previously you had to have one as a child;
  • There are some changes in the functionality of navigation hooks. For more details, go here.

Conclusion

To sum up, the benefits of Next.js 13 are worth the upgrade. Furthermore, the additional packages, such as @vercel/og or @next/font are worth adopting along with the new app directory. Of course, you don’t need to migrate all pages right away. You may upgrade incrementally, one page after another. This was always Vercel’s philosophy with the framework. This is perhaps the reason why the biggest companies feel safe using Next.js in production. If you want to have your app migrated to Next.js 13, want a new site running on the most popular React framework, or want to have a chat about building your web app, feel free to contact us here.

Liked the article? subscribe to updates!
360° IT Check is a weekly publication where we bring you the latest and greatest in the world of tech. We cover topics like emerging technologies & frameworks, news about innovative startups, and other topics which affect the world of tech directly or indirectly.

Like what you’re reading? Make sure to subscribe to our weekly newsletter!
Categories:
Share

Join 17,850 tech enthusiasts for your weekly dose of tech news

By filling in the above fields and clicking “Subscribe”, you agree to the processing by ITMAGINATION of your personal data contained in the above form for the purposes of sending you messages in the form of newsletter subscription, in accordance with our Privacy Policy.
Thank you! Your submission has been received!
We will send you at most one email per week with our latest tech news and insights.

In the meantime, feel free to explore this page or our Resources page for eBooks, technical guides, GitHub Demos, and more!
Oops! Something went wrong while submitting the form.

Related articles

Our Partners & Certifications
Microsoft Gold Partner Certification 2021 for ITMAGINATION
AWS Partner Network ITMAGINATION
ISO 9001 ITMAGINATIONISO-IEC 27001:2013 ITMAGINATION
Great Place To Work
ITMAGINATION Winner Great Place To Work Best Workplaces Poland 2021
© 2022 ITMAGINATION. All Rights Reserved. Privacy Policy
// Opening all links in new tab // Syntax Highlighting Code