Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 25, 2022 12:14 pm GMT

NextJS 13: 700x Extremely Faster Than Webpack

Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.

Recently, Vercel announced the newer version Next.js 13 (stable) on October 25th, 2022 which make it lays the foundations to be dynamic without limits.

Here are the three major categories that will be discussed thoroughly in this article.

Three major categories of Next.js 13 update:

  • Compiler Infrastructure
  • Rendering Infrastructure
  • Component Toolkit

So, lets dig deeper into what each announcement entails.

1. Turbopack

Turbopack

Initially, it was obvious to write JavaScript tooling 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 6 times faster minification.

Similarly, Webpack has become an integral part of building the web that now needed to be reconditioned to build the webs next-generation bundler.

TurboPack in Next.js 13 shows:

  • 700 times faster updates than Webpack
  • 10 times faster updates than Vite
  • 4 times faster cold starts than Webpack

2. New App Directory

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 page's directory would act as the route in the UI. The new app directory works adjacent to the page's 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.

3. Fresh Font System

The latest version Next.js 13 presents a brand-new font system with amazing properties,

  • Automatic optimization of fonts including custom fonts
  • Improved privacy and performance by removal of external network requests
  • Integral impromptu self-hosting for any font file
  • Zero layout shift automatically using the CSS size-adjust property

Fresh Font System

4. New Image Component

A huge portion of the web is made up of images accounting for 44% of a pages 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,

  • Native lazy-loading
  • Better performance
  • Improved accessibility
  • Reduced size
  • Less usage of client-side JavaScripts
  • Maintains familiar interface

5. Dynamic Social Cards

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.

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.

6. Middleware API updates

In Next.js 12 there was an addition of new properties that improve the developers experience with stable middleware. In Next.js 13, middleware can now modify request headers, and response headers, and send responses.

It allows running code before a request is completed and even can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.

Take a look at how you can set request and response headers using NextResponse API,

Wrap-up

Overall, Next.js 13 enables the use of tooling that prioritizes accessibility and performance which is very important as it allows you to focus on ideation and experimentation within the project. This upgradation will allow people to work seamlessly and efficiently as they want anywhere by building a faster, more performant, and accessible web.

Source


Original Link: https://dev.to/karanjrawal/nextjs-13-700x-extremely-faster-than-webpack-17a3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To