Next.js has released a new major version that is jam-packed with tons of new features, some of which can be seamlessly integrated into your Next.js 12 app and others that cannot.
If you’re just getting started, it can be difficult to distinguish between hype, misinformation, and what’s stable for your production apps, but don’t worry. We are bringing an overview of all changes.
What misinformation?
As with all Next.js releases, a few APIs have been moved into the stable core and are recommended for use, while others remain in the experimental channel. APIs labeled as “experimental” are still being debated. The core functionality is present, but how these APIs behave and how they can be used is still subject to change due to bugs or unexpected side effects.
The experimental releases were big in version 13 and took over the spotlight. Many people mistook the entire release for unstable and experimental, but it is not. If you do not intend to use any experimental APIs, Next.js 13 is quite stable and allows for a smooth upgrade from version 12.
Releases summary
Experimental:
- App Directory
- New Bundler (Turbopack)
- Font Optimization
Stable:
- “New” Image Component to replace legacy Image component as default
- ES Module Support for next.config.mjs
- “New” Link component
The App directory
This feature is a major architectural overhaul. It puts React Server Components front and center, uses a completely new routing system and router hooks (under next/navigation rather than next/router), and flips the entire data-fetching story. This is all intended to enable significant performance improvements, such as eagerly rendering each part of your view that does not rely on data while suspending (yes, you read that correctly!) the pieces that are fetching data and being rendered on the server. As a result, how you architect your Next.js app will undergo a significant mental model shift.
New Bundler And Benchmarks
Next.js has been powered by webpack since its beginning. This year has seen the emergence of a new generation of low-level language bundlers, such as ESBuild (which powers Vite), Parcel 2 (Rust), and others. We’ve also seen Vercel lay the groundwork for a significant change in Next.js. They added SWC to their build and translation process in version 12 as a step toward replacing both Babel and Terser.
Turbopack, a new bundler written in Rust with very bold performance claims, was announced in version 13. Yes, there has been some discussion on Twitter about which bundler is the fastest overall and how those benchmarks were determined. Still, it’s debatable how much Turbopack can help large Next.js projects with far superior ergonomics than any other tool (for starters, with built-in configuration).
Font Optimisation
The new @next/font module allows you to optimize the performance of your Web Fonts during the build process. During build-time, it will download the font assets and place them in your own /public folder. This will save a round-trip to another server, avoid an additional handshake, and ultimately deliver your font as quickly as possible while properly caching it with the rest of your resources.
When using this package, keep in mind that you must have a working internet connection when you run your development build for the first time so that it can properly cache it; otherwise, it will fall back to system fonts if adjustFontFallback is not set.
New Image And Link Components
The most important components of the Next.js package have been slightly updated. Since Next.js 12, Next Image has really been living a double life in @next/image and @next/future/image. The default component in Next.js 13 has been changed:
- next/image moves to next/legacy/image
- next/future/image moves to next/image
This change is accompanied by a codemod, which is a command that attempts to automigrate the code in your app. This ensures a smooth transition when upgrading Next. js: npx @next/codemod next-image-to-legacy-image ./pages
Improved next/link
It is no longer necessary to manually add <a> to next/link.
This was introduced as an experimental option in 12.2 and has since become the default. Link> in Next.js 13 always renders an a> and allows you to pass props to the underlying tag.
ES Modules And Automatic Module Transpilation
It was previously inconvenient to share configuration between configuration files and other files that could be used during runtime. This is due to the fact that next.config.js is written with CommonJS as the module system, which cannot import ESM files. ESM is now supported by Next.js by simply adding type: “module” to your package.json and renaming next.config.js → next.config.mjs.
The “m” stands for “module,” and it is part of the Node.js specification for ESM support.
Important changes
- The minimum React version has been bumped from 17.0.2 to 18.2.0.
- The minimum Node.js version has been bumped from 12.22.0 to 14.6.0, since 12.x has reached end-of-life (PR).
- The swcMinify configuration property was changed from false to true. See Next.js Compiler for more info.
- The next/image import was renamed to next/legacy/image. The next/future/image import was renamed to next/image. A codemod is available to safely and automatically rename your imports.
- The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.
- Routes are no longer prefetched when the User-Agent is a bot.
- The deprecated target option of next.config.js has been removed.
- The supported browsers have been changed to drop Internet Explorer and target modern browsers. You can still use Browserslist to change targeted browsers.
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+