Just when we thought that Next.js had everything under the sun to make your app look and feel beautiful, the framework's creators added even more features to ensure you get a better experience. Today we’ll be discussing all of the new features that have been introduced in Next.js 13, the Next.js latest version, from improved support for serverless apps to new packages, as well as other improvements across every aspect of using Next.js.
Table of Contents
What is Next.js?
What's new in Next.js 13?
➤ Compiler infrastructure - Turbopack Intro
➤ New Router & Data fetching - Infrastructure for routing and rendering
➤ Component toolkit - Improved Image component, new Font component & OG Image Generation
Conclusion
What is Next.js?
Next.js is an open-source framework for building Next generation Single-Page Apps (SPA). It allows you to build SPAs faster and with less code using the best practices from the React ecosystem. It gives you the best modern development practices while helping you reduce the learning curve. Next.js is built on top of the Webpack Asset Pipeline and React. You can easily write your app in server-side rendering (SSR) or client-side rendering (CSR) mode and deploy it to multiple platforms, including the Web, Android, and iOS.
The popularity of Next.js, one of the most popular web app frameworks, stems from its ease of use and developer experience—but it also boasts functionality that makes it particularly attractive to media, SaaS, and retail companies. The original version of Next.js was a React framework for dynamic servers inside websites. Next.js was developed for teams to build ambitious, complicated applications rather than single-page applications. However, being dynamic has always had numerous limitations. To be dynamic, it required juggling two different sets of runtime APIs, conventional web APIs in the browser, and no Javascript on the server. It also requires investing in expensive infrastructure that is always running and necessitates labour-intensive processes.
Upgrading a static application was the only method to scale a dynamic global application unless you were one of the web giants like Google or Facebook. When dynamic requirements are present, the drawbacks of static become clear. You rely on enormous quantities of client-side JavaScript since your cached or static-produced page is incompatible with fine-grained user customisation. Trying to maximise within those restrictions was never the solution. And that's why Next.js 13 is introduced.
What's new in Next.js 13?
Next.js 13 is the latest version of Next.js. The new features introduced are huge, and some of them have been long-requested by the community. It finally enables you to be dynamic without limits.
Next.js 13 includes three significant areas of innovation:
- Compiler infrastructure. At the time, Webpack, an open-source bundler that transformed front-end development, was the foundation upon which they built Next.js. While Webpack has made it possible for JavaScript to progress from adding a few interactive elements to a page to creating full web applications with JS or TypeScript, it's time for a major update, the Webpack replacement: the Turbopack.
- Infrastructure for routing and rendering. Now there's a revised method for server rendering, data fetching, and layouts. This way, they can provide significantly less client-side JavaScript while enabling and simplifying the most ambitious applications by building on React's multi-year investments. Almost everything you love about Next.js and React is made simpler today.
- Component toolkit. Images, fonts, scripts, and even social cards are some of the most prevalent web artifacts that need to be covered by a genuine web SDK. Therefore, advancing the web demands a thorough investment in tooling, runtime, cloud infrastructure, and the Next.js community's ecosystem as a whole. Vercel has been on a mission to make it possible for developers to do work as inspiration strikes. For example, the new @next/font package makes it very easy to add fonts to your app’s style, and the new @next/image package makes it easy to load images asynchronously and lazy-load them on demand.
Run the following commands listed here to update to Next.js version 13.
Let's look at these upgrades in more detail.
Compiler infrastructure - Turbopack Intro
It's a fresh start for the web ecosystem as a whole, for Next.js, and for compiler infrastructure. With no setting required, Next.js gives your app the ideal defaults. Writing JavaScript tools in JavaScript in 2016 was only natural. The term "tools" here refers to Babel, Terser, and Webpack. These tools found it difficult to keep up as front end applications increased in size and complexity. With the performance of JavaScript-based compilation, they reached their limits. Next.js started making the switch to native Rust-powered tooling as a result.
Then, the Webpack creator, Tobias Koppers, joined the Vercel team, and together they created Turbopack. Turbopack updates huge applications 700 times quicker than Webpack and 10 times faster than Vite. The gap is considerably more pronounced for really large applications, with 20 times faster updates than Vite. These speed improvements apply to starting up your local development server and code modifications. The performance of Turbopack is due to its low-level incremental engine made with Rust and well-optimised machine code. Turbopack only ever completes a single task at a time. Beginning with React fast refresh, Turbopack focuses on your local development experience. In the future, Turbopack will also be used to power local, and cloud-based Next.js production builds. Additionally, you may collaborate with teams from throughout your entire organisation to share work that has already been completed, not just on your local machine.
You can try out the Turbopack Alpha by upgrading to Next.js 13 and running next dev —turbo.
To view the benchmarks and features supported, visit turbo.build.
So Turbopack is the new cornerstone of high-performance bare metal tools and is now open source. It is optimised for React and Next.js code bases.
Even for enormous code bases, building for production may be completed in under ten seconds. Thanks to Vercel remote cache and ourNext.js build infrastructure, these quick updates benefit you and the rest of your team by preventing duplication of effort. This remote cache's build time has already saved development teams at businesses of all sizes span decades.
New Router & Data fetching - Infrastructure for routing and rendering
Next.js 13 rethinks how pages are organised, visualised, and provided at the edge to progress the web. The file system-based router is one of Next.js's most well-liked features. You can automatically construct routes in your application without configuration by dropping a file inside a folder. The router has contributed to viewing some of the biggest web applications in the world. This has enabled usNext.js developers to find amazing opportunities to keep providing the finest router available. To enable global data fetching in your application, they may make it simpler to co-locate data fetching inside components. For instance, sharing dynamic data requirements across pages can make it simpler to co-locate your application code with your routes, such as components, tests, and styles. After that, creating your conventions and setup is no longer necessary for you and your team. Complex interfaces that keep state through navigations and avoid costly redraws, renders, and retriggering of animations can be laid out more easily. For gradual adoption, the new router begins by introducing the app directory, which can coexist with the directory of the current page.
The Next.js team collaborated with the React core team to develop a fresh approach to fetching that will benefit all versions of React and Next.js. Next.js data fetching is being extended with new features, including built-in caching, request deduplication, programmable revalidations, and granular data purging to maintain its adaptability and scalability. As a result, a hybrid solution that combines the advantages of ISR, static data fetching, service-side data fetching, and even SWR is now available. Everything on this product is now server-first because the router is constructed using React server components. Rich interactive client-side experiences can still be maintained while drastically less JavaScript is shipped by default. The new React primitives enable handling loading, error states, streaming UI as it is rendered, and possibly even mutating data in the future. Years of investment into the React ecosystem have allowed for the creation of this new API.
You may implement these features by including the app directory in your new or current code bases. You can make this shift gradually, even one page at a time. The pages directory, in contrast, continues to receive full maintenance and upkeep, and with the help of Turbopack, development on both the pages and app directories may be accelerated.
Component toolkit - Improved Image component, new Font component & OG Image Generation
Making a site load quickly can be complicated. Getting third-party assets like fonts, images, and scripts is just as important as how you render your components. You must correct things to prevent abrupt layout changes, input delays, and unclear content delays. This is the reason Next.js is constructing a more advanced compiler and rendering infrastructure. Additionally, they are providing you with solutions to these common and more complex issues:
Images
On average, images make up 44% of the weight of a page. The quality of the images is crucial. 70% of the Next.js community participants said that when they used a Next.js image component in production, there was an improvement in the basic web metrics. Vercel can optimise images on demand for even higher speed since it complements this image component with its global edge infrastructure. Thanks to this collaboration between the framework and the cloud infrastructure, billions of optimised images have now been distributed on the web without developer effort.
The efficiency and developer experience of the image components have significantly improved in Next.js 13. React's component abstraction is valuable because it can contain complexity while offering a straightforward HTML-like user experience. Next.js 13 is launching a better image component that uses fewer client-side JavaScripts, runs better, and keeps its familiar interface thanks to web platform advancements that are available across all major browsers, such as native image lazy loading and CSS aspect ratios.
In Next.js 12, Image lives as both @next/image and @next/future/image. Next.js 13 switches the default component to:
next/image moves to next/legacy/image;
next/future/imag moves to next/image.
The code in your app will be automigrated using a codemod. Next.js can be upgraded this way smoothly:
npx @next/codemod next-image-to-legacy-image ./pages
Custom fonts
It's likely commonplace for fallback fonts to cause layout changes or even significant delays before the correct font is seen on the screen. Next.js 13 demonstrates that you can easily alter your brand's typefaces while maintaining a speedy website. With a brand-new font system built in partnership with the Chrome team, they are reinventing how developers use fonts. This built-in module optimizes your typefaces by removing connection setup times to external hosts and reduces the need for external network requests, improving privacy and efficiency. This implies that Next.js can automatically offer a typeface for you, giving you a unique brand identity across your entire domain, whether you import it from a registry like Google Fonts or your own custom font files. By relying on the size adjust CSS attribute provided by the web platform, we have also eliminated layout shifts. The new font module can automatically prevent 100% of visual disruption from missing fonts and 99% of layout changes brought on by custom fonts.
With the new @next/font module, you can optimize your Web Fonts during build time. It downloads font assets and hosts them in your /public folder. Your font will be delivered in the fastest way possible without a round-trip to another server and will be properly cached along with the rest of your resources, saving you resources.
When you run your development build for the first time, make sure you have an internet connection so it can cache it correctly. Unless adjustFontFallback is set, system fonts will be used.
A special module for Google Web Fonts is also available in @next/font:
import { Jost } from '@next/font/google';
// get an object with font styles:
const jost = Jost();
// define them in your component:
<html className={jost.className}>
If you use custom fonts, the module will also work:
import localFont from '@next/font/local;
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>
Social cards
They are also called open graph images, which can significantly raise your content's clickthrough rate. Static social cards take a lot of effort, are tricky to manage, and are prone to mistakes. As a result, social cards are frequently lacking. It's time to get dynamic once more. Dynamic social cards, which must be customised and computed instantly, have been difficult and expensive to create.
Therefore, Vercel OG Image Generation, a new method for instantly producing dynamic social cards, was announced by Next.js. Vercel edge functions, web assembly, a brand-new core library for transforming HTML and CSS into images, and React component abstraction make this method five times faster than prior alternatives. No more expensive equipment or headless web browsers. Once again, remarkable web experiences are made possible by the fusion of basic components with global edge infrastructure. Doing so will simplify things, save much computing time, and free up developer and designer hours.
Conclusion
Next.js is a framework that has been around for a while and has amassed a large user base. With this release, the creators of Next.js have brought in a new era of web development with many new features and improvements to the existing ones.
Major updates in Next.js 13:
- It introduced Turbopack. As they work toward the future of single-digit second production builds, making incremental changes during development can happen in as little as 10 milliseconds. Teams on Vercel collectively save build time because of Vercel's remote cache, making this an investment that grows over time.
- Data routing, fetching, and rendering. With built-in support for layouts and strong new conventions, the new app directory introduced in Next.js 13 can be gradually adopted alongside your page's directory. Your React pages become the best serverless and edge infrastructure when deployed with Vercel, giving dynamic at static speed, availability, and cost efficiency.
- They continue to expand their toolkit. With Next.js developers working with the Google Chrome team, we're getting the best of both worlds: simple abstractions that unlock potent personalisation for your businesses.
For that, you should update your Next.js and get these benefits. If you want to upgrade your digital products using the newest Next.js and with an experienced and innovative company, contact us. We've been working on React.js for more than 12 years, with some of the best European developers working on it.
