Next.js 13: Faster than fast with all new updates
What was the need for Next.JS 13?
The concept of developing Next.JS is to build ambitious and complex applications for teams. And, to achieve that Next.js had its origins as a React framework for dynamic rendered sites.
However, it was not all on one plate. There were limitations in enjoying the dynamic ability of Next.js. Some stipulations made it hard to keep it effective. Previously, next.js usage came with the expense of costly, always-on infrastructure, requiring manual provision, and extensive operations.??
Additionally, primary versions were meant to juggle two sets of runtime APIs with no JS in the server, and web standard APIs in the browser. It was limited to single region origin, depending on legacy, static, and CDN caching to try to perform and scale.???
These were the main reasons as explained by?Next.js team?that encouraged to bring out a version to make it?dynamic without limits.?
Let’s dig deep to understand what makes Next.JS 13 limitless.
What’s new embedded in Next.JS 13?
The new release of next.js, as introduced on 25th October 2022, is version 13 of Next.js. It has some considerable changes that you need to understand to structure your project on the go with zero destructive codings.?Here are the three major categories that will be discussed thoroughly in this article.?
Three major categories of Next.js 13 update:
Let’s take on board the anatomy of Next.js 13 new features.
# Turbopack
Initially, it was obvious to write JavaScript tooling in JavaScript, required tools like Babel, Terser, and WebPack. With the growing size and complexity of front-end applications, all these toolings faced bumbling to keep up.?For this, the transition was initiated to native rust-powered tooling.
It started by migrating away from Babel, which resulted in 17 times faster transpilation. Terser was next replaced to result in six times faster minification.
Similarly, Webpack has become an integral part of building the web that now needed to be reconditioned to build the web’s next-generation bundler.?
As a cause, this architecture is generated by utilizing the experience of 10 years of WebPack combined with the innovations in the incremental computation from Turborepo and Google’s Bazel, which is intended to withstand the next 10 years.
Hence, the latest version of Next.js introduces a rust-based successor of WebPack named?TurboPack.?
TurboPack in Next.js 13 shows,
Additionally, Turbopack provides a wide range of features to have these fast and flexible development services:
# New?app?Directory
One another important component of Next.js is the?file system-based router, which requires no configuration. Having served the feature to the largest web applications in the world it shares new opportunities to enhance it even more.
In the previous versions of next.js, any file created inside the?pages?directory would act as the route in the UI. The new app directory works adjacent to the?pages?directory to support incremental adoption and provides other new features like server-side rendering and static-site rendering.
领英推荐
The new?app?directory supports other attributes like: layouts, server components, streaming, and data fetching.
Layouts?– Here in Next.js 13 it has become easier to extract shared code between multiple layouts. Each directory accounts page.tsx/jsx file as the content. Whereas, layout.tsx/jsx describes the template for both that page and the subdirectories. Thus, generating nested templates become simple.
Server Components?– The latest version supports React’s new server components architecture. This attribute allows for building fast, highly-interactive apps with an exclusive programming model to provide a great developing experience. This also lays a foundation to build complex interfaces at the same time reducing the amount of JavaScript sent to clients, which causes faster initial page loads.?
Streaming?– Next.js 13 component introduces the competence to progressively provide and incrementally stream provided units of the UI to the client. With this attribute, a developer is able to instantly render the parts of the page that do not specifically require data and show a loading state for parts of the page that are fetching data. Instant loading states allow pre-rendering loading indicators like skeletons and spinners, or a small but meaningful part of future screens such as cover photos. This consequently helps in better app understanding and ultimately better user experience.
Data fetching?– The native?fetch?web API has been extended in React and Next.js which automatically provides one flexible way to fetch, cache, and revalidate data at the component level. This denotes that all the benefits of Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) will now be available through one API.
# Fresh Font System
The latest version Next.js 13 presents a brand new font system with amazing properties,
The fresh font system in Next.js 13 allows the handily use all Google Fonts with performance and privacy in mind. Any desirable font can be imported using?@next/font/google?as a function. This is how you can use the selected font on all the pages:
Even the local custom fonts are supported along with automatic self-hosting, caching, and preloading font files, with the freedom to customize every part of the font loading experience. This still ensures great performance and no layout shift covering the?font-display, preloading, fallbacks, and more.
# New?image?component
A huge portion of the web is made up of images accounting for 44% of a page’s weight on average. Getting the images right is crucial, hence integrating this new?image?component in Next.js 13 is quite compelling.
The new version put forward substantial improvements to the?image?component in performance as well as developer experience. For the web platforms available across all major browsers, this new?image?component set forth,?
# Dynamic Social Cards
Also known as open graph images, social cards that has the capability to massively increase the engagement rate of clicks on your web content. The developer community experiences 40% better conversions using dynamic social cards.?
Static social cards are time-consuming, error-prone, and hard to maintain. Moreover, having personalized and computed social cards were laborious and expensive, until now.
Next.js 13 version brings an affordable and contented solution for generating dynamic social cards – OG Image Generation. This outlook is 5 times faster than the existing solution. It utilizes the Vercel edge functions, web assembly, and an advanced new core library for converting HTML and CSS into images and leverages React component abstraction.
OG Image generation is the combination of simple components with global edge infrastructure that enables amazing experiences on the web and requires no headless web browsers, and no costly infrastructure.
@vercel/og?will spontaneously add the correct headers to cache computed images at the edge which helps in making this feature cost-effective.
The other features supported with OG image generation include:?
Check all new features here: https://bit.ly/3XJe17x