Next.js 12 - 5 Changes You Should Pay Close Attention To [UPDATED]
Senior Content Marketer & Technical Expert
Cloud & DevOps
2022-07-11 Updated the article to include the new feature, "Layouts"
2022-11-09 Updated the article to link to the article about Next.js 13. It's available here.
When developing a website, configuring your framework or library used to be a headache. You used to have to enable numerous crucial features manually, which took some time and a lot of patience.
Next.js was created to simplify the development process, and developers really appreciated that. It is the most popular framework in its category for React, and perhaps the most popular hybrid web framework in general.
Last week, Vercel (the company behind Next.js) shared that they are releasing Next 12 — the next major upgrade. There are a few features that should make the Developer Experience (DX) even better, while there are also some novelties that allow for entirely new solutions to be developed.
Compiling a big website can take a lot of time. Vercel realized it, and introduced a new compiler written in Rust, which is faster than the predecessor. Based on SWC this move is a part of a broader movement towards tools written in Go (e.g., esbuild), and Rust (the aforementioned SWC), as you can easily compile code in these languages to lightning-fast WebAssembly.
The speed is something to admire. The company shares that Fast Refresh is now three times as fast, while builds take five times less time. Comparing SWC to Babel alone, the Rust-based tool is a staggering 17 times quicker. In case you were wondering what codebase was, the benchmark run on, the results were “from using the new Rust compiler with large Next.js codebases.”
A new introduction to Next.js, Middleware, gives you an opportunity to call code before a request is completed. Thanks to that, you may modify the response by “rewriting, redirecting, adding headers, or even streaming HTML.”
This gives you a lot of space to maneuver in, and a chance to do a lot, including:
If your site is non-compliant with GDPR, you may restrict traffic from the EU
Analytics on the server side
Much, much more
It all works out of the box, of course, and Middleware will work on the Edge as well, with few restrictions on what is available in this environment for you. For details, please refer to this page from the official documentation.
What Exactly Does “Edge” Refer To?
Speaking of the Edge (no, not the guitarist from U2): in the simplest terms, it’s computing done near the request to cut down on latency.
Native ES Modules Support
ES Modules are nothing new. In fact, they were introduced all the way back in 2015. It took a while to adopt them, however. Node.js started to natively implement ES Modules in March 2021! Browsers were a bit faster. Firefox was the last major browser to adopt them in 2018 with Firefox 60.
Dynamic URL Imports
In short, instead of pulling packages from the centralized store, you may now install them from wherever you want. Next.js then caches them, and they are ready to go.
The only requirement is for you to let the framework know what is the domain of the CDN you want to use, and it’s done!
This is how to do it:
Preparing for React 18
React 18 will bring numerous new features including Server Components, Concurrent Rendering, and Automatic Batching. All three of them aim to make React snappier, and lighter; the opponents of the library often said that Facebook’s (Meta’s) creation is too heavy and too slow for what it’s doing.
Additionally, we can load data directly from the server. We don’t have to wait for the client to request some data, and later to load it. Web apps will become faster and respond quicker. This is a win for the internet.
Although Server Components sound like getServerSideProps that Next.js allowed for some time now, the aforementioned functionality will most likely stay, and the two APIs will coexist together.
Layouts: An Upcoming Change
Layouts are a huge change to come; quite a monumental one. Under this one big change, there are several other, smaller ones. Before we dive deeper into the topic, we will mention, that the new features will be opt-in. You will have to place your code in the app folder, not to break your apps.
Parallel Data Fetching
The upcoming change will allow us to fetch data parallelly. Before that, data would be fetched "in a waterfall"; one request after another. That was not ideal, and the approach led to much more time spent waiting for the website to load. The fix was relatively simple to devise, though much harder to actually implement.
Even though there are many more changes coming, we will have to wait until the Next.js team shares more on the major update that's likely coming.
The proposed changes are now here, and at the time of writing this update (09.11.2022), the changes are live. We described them in another article, here. One disclaimer: the features are in alpha.
As is sometimes the case with major updates, there are some breaking changes the team behind Next.js decided to implement. Luckily, more often than not, they are not going to cause any problems to developers.
The one change that might become an issue is updating Webpack from 4 to 5. As the team wrote on their blog, they have “worked closely with the community to ensure a smooth transition to webpack 5.”
A few minor changes that should not impact you too much is that there is no need to set target in next.config.js anymore. The option had been introduced in Next 8, though the team quickly realized it was not ideal, creating @vercel/nft. It detects what code is necessary, automatically.
The other two breaking changes is that next/image now uses a span as the wrapping element instead of a div, and the minimum Node.js is now 12.22.0. This is due to the native ES modules support.
Next.js enables developers to write quality React apps quicker. The new major update won’t disappoint React developers, and it will most likely be accepted with open arms. Should you want to try out some new features yourself, we have a project you can clone in no-time. Visit our repository by clicking this link.
Like developing React apps? We're hiring!
Do you like writing React apps, and think you are one of the best in the area? Do you like new technologies? See our open jobs — we work with the biggest companies in the world to deliver great web apps.
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.