Experience with NextJS 12 Upgrade

Over the last week, I upgraded a couple of projects to NextJS 12 including this website, a chrome extension I built lately and even a feature-rich dashboard at work. So, let’s talk about it.

What’s new

You probably know what’s new in the latest version but I’m going to try talking about it. Feel free to skip to the next section if you already know.

SWC: Using a compiler built with rust lang is obvious to bring performance benefits as it’s built for that exact reason. In NextJS 12, SWC replaces Babel (built with JavaScript - slower in comparison) for compiling and transpiling your code, bring in huge improvements to dev and production builds.

Images: As newer and more optimal image formats are being supported by browsers, Next/image component can now convert your images to AVIF format, making them smaller than WebP. It is an opt-in feature as the conversion is slower than WebP, Also, Edge and Safari doesn’t support AVIF yet.

Middlewares: Another opinionated yet nifty trick to have in their sleeves. After helping with adoption of serverless functions via special api routes, middlewares are focused on bringing serverless edge functions to the main stream. These act as middlewares in ExpressJS but essentially run in edge servers, thereby reducing roundtrip time. I can easily see myself using it for quick region/locale i18n redirection for marketing websites.

There are a few more tiny ones and some experimental alpha features in this build that is tailored for very specific use-cases..

Why upgrade?

You don’t have to if you are already happy with what you have right now.

But, if you are looking for reasons, here are some:

• If you have a marketing site - improvements for bots if you are using static regeneration
• If you have it connected to CMS which may trigger multiple builds through out the day - faster builds and so faster changes to the user
• Better DX (to an extent, more on this later) - Faster development times

One command

npm i next@12.0.3 or yarn add next@12.0.3 - latest patch version at the time of writing

For most projects, this is a drop in replacement for v11. If you haven’t migrated to Webpack 5 yet in v11, you can expect to face some issues.

Everything that works

The team behind has done an excellent job at trying their best to have all the required pieces ready before moving to SWC. All features that comes out-of-the-box with NextJS works flawlessly. I haven’t used styled.jsx and so I’m not sure of the new CSS parser ( working with Tailwind / Chakra UI instead ).

Faster builds during development are very much visible and is going to improve productivity for sure. And middleware does wonders for auth verification in my testing, skipping UI flickers and providing a faster redirect to login page.

The hiccups

I did face a fare share of issues with migration. Some of these could be things you may also face which is why I wanted to share my experience here.

• The AVIF images are not always smaller than WebP, so its better to evaluate for your use-case. And the compression time as mentioned above, is much higher for the new format. If the asset changes frequently, your users may face longer wait times for the image to load.

• Babel is a monster. Over the years, there has been so much tooling that has been built around it. And so, dumping it one fine day is not going to happen quickly. Most of the open-source transforms (other than the one supported by NextJS) are yet to be ported to rust for SWC. Feedback is being collected in order to prioritize the porting of existing transforms.

So, if you have a .babelrc in your project with some custom transforms, be it for any package, it is hard to find alternatives. In my experience, I was not able to get why-did-you-render to work without it.

You still can use your babel config, but it means that you are opting out of SWC and its benefits for now.

• Another thing is with testing. If you are using any package that depends on babel, you need to find adapters for SWC. Luckily, for me, there is a Jest transformer already and was able to get my UT working faster 🚀.

Future

We will have to wait and see how the tooling around SWC evolves as there is increased adoption. ESBuild, built with go lang, is also a great alternative and I hope it will foster a healthy competition.

All that being said, NextJS v12 is a great move to make the web development faster than ever before. If there is anything I can help with or clarify, feel free to message me on Twitter.

Links:

• Official upgrade guide - https://nextjs.org/docs/upgrading
• Github Discussion thread on babel transforms - https://github.com/vercel/next.js/discussions/30174