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
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.