What’s New In Next.js 13?

mayank November 1st, 2022

Hey! We are here with the new concepts of Next.JS 13. Being a Next.JS development company in India and USA, we feel the responsibility to share recent updates about the technology. So if you are searching for what is new in Next.JS 13, here you go.

Our file-system router is arguably the most popular feature of Next.js. Set down a file inside, and you will be able to create routes in your application. No configuration is required.

We are enhancing the routing and layout exposure in Next.js along with the launching of the app/ listing (beta). This is the end result of the Layouts RFC (Request For Comment) formerly posted for network feedback. The new router consists of aid for:

Layouts: Smoothly allocate UI among routes whilst keeping state and avoiding overpriced re-renders.
Server Components: Making server-first the default for extremely dynamic applications.
Streaming: Exhibit immediate loading states and circulation in units of UI as they are delivered.
Support for Data Fetching: Server module and widened API allows component-level fetching.

In case, you do not want to apply for the app/ listing while upgrading to Next.js 13, the app/ listing can coexist with the present page listing for incremental adoption.

Layout

The application/catalog makes it simple to project complex connection points that keep up with the state across routes, avoid costly re-delivery, and empower progressed routing designs.

Furthermore, you can settle designs, and co-locate application code with your routes, such as units, tests, and styles.

You can then characterize designs through the file system. Designs divide UI among numerous pages. On route, formats preserve state, stay intuitive, and don’t re-render.

Server Component

The application/catalog presents support for React’s new Server Components engineering. Server and Client Components utilize the server and the client each for what they’re best at – permitting you to construct quick, exceptionally intuitive applications with a solitary programming model that gives an extraordinary engineer insight.

With Server Parts, we’re establishing the base to assemble complex points of interaction while minimizing the amount of JavaScript dispatched to the client, empowering quicker initial page loads.

At the point when a course is loaded, the Next.js and React runtime will be loaded, which is cacheable and anticipated in size. This runtime doesn’t expand in size as your application develops.

Furthermore, the runtime is not concurrently loaded, allowing your HTML from the server to be dynamically improved on the client.

Streaming

The application/catalog acquaints the capacity to logically render and steadily stream delivered units of the UI to the client.

With Server Parts and nested layouts in Next.js, you’re capable of quickly rendering portions of the page that don’t explicitly need information and showing a loading state for parts of the page that are yielding information.

With this methodology, the client doesn’t need to trust that the whole page will load before they can begin communicating with it.

When conveyed to Vercel, Next.js 13 applications that utilize the application/registry will stream responses by default in both the Node.js and Edge runtimes for further developed execution.

Data fetching

React’s recent Support for Promises RFC initiate a strong new way to get information and handle guarantees inside parts:

The local fetch Web API has likewise been reached out in React and Next.js. It naturally dedupes get demands and gives one adaptable method for bringing, storing, and revalidating information at the component level.

This implies all the advantages of Static Site Age (SSG), Server-Side Delivering (SSR), and Steady Static Recovery (ISR) are currently accessible through one Programming interface:

In the application catalog, you can bring information inside designs, pages, and parts – including support for streaming responses from the server.

We’re facilitating ergonomic ways of taking care of loading and mistake states and streaming in UI as it’s delivered. In a future delivery, we’ll be improving and working on information changes, too.

We’re eager to work with the open-source local area, bundle maintainers, and different organizations adding to the React environment to work for this new period of React and Next.js.

The capacity to collate information get internal components and ship less JavaScript to the client were two significant bits of community assessment we are eager to incorporate with the application/catalog.

Introducing Turbopack (alpha)

Next.js 13 incorporates Turbopack, the new Rust-based replacement to Webpack.

Webpack has been downloaded over 3 billion times. While it’s been an indispensable portion of building the Internet, we’ve reached the limit of the maximum presentation feasible with JavaScript-based tooling.

We have mentioned Next.js 12 in our previous blog where we mentioned rust compiler that benefits native compilation. Furthermore, in Next.js 12, we started our transformation to local Rust-controlled tooling.

We began by moving away from Babel, which brought about 17x quicker transpilation. Then, we supplanted Terser, which brought about 6x quicker minification. Now is the ideal time to bet everything on local packaging.

Involving the Turbopack alpha with Next.js 13 outcomes in:

700x quicker refreshes than Webpack
10x quicker refreshes than Vite
4x quicker chilly beginnings than Webpack

Turbopack just packages the base resources expected to be developed, so startup time is incredibly quick. On an application with 3,000 modules, Turbopack requires 1.8 seconds to boot up. Vite requires 11.4 seconds and Webpack requires 16.5 seconds.

Turbopack has exceptional support for Server Parts, TypeScript, JSX, & CSS, and that’s just the beginning. During the alpha, many elements are not yet upheld. We’d very much want to hear your input on utilizing Turbopack to accelerate your nearby emphases.

next/image

Next.js 13 presents a strong new Picture part, permitting you to effectively show pictures without design shift and streamline documents on-demand for expanded execution.

During the Next.js People group Review, 70% of respondents let us know they utilized the Next.js Picture part underway, and thus, saw further developed Center Web Vitals. With Next.js 13, we’re working on straightaway/pictures much further.

The new Image part:

Transports less client-side JavaScript
Simpler to style and design
More open requiring alt labels of course
Lines up with the Internet stage
Quicker on the grounds that local lethargic stacking doesn’t need hydration

Upgrading next/ image to Next.js13

The old Image part was renamed to next/legacy/image. We’ve given a codemod that will consequently refresh your current utilization of next/image to next/legacy/image. For instance, this order would run the codemod on your ./pages catalog when run from the root:

 
					 <Image
       src="https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8bmF0dXJhbHxlbnwwfHwwfHw%3D&w=1000&q=80"
       alt="nature"
       width={300}
       height={200}
          />

next/font

Next.js 13 presents an excellent text style framework that:

Consequently upgrades your textual styles, including custom text styles.
Eliminates external organization demands for further developed security and execution.
Underlying programmed self-facilitating for any text-style document.
Zero design shift consequently utilizing the CSS size-change property.

This new text style framework permits you to involve all Google Text styles in light of execution and security helpfully. CSS and text-style documents are downloaded at fabricate time and self-facilitated with your other static resources. No requests are sent to Google by the program.

Custom textual styles are likewise upheld, including support for programmed self-facilitating, reserving, and preloading text style records.

You can alter all aspects of the text style loading experience while guaranteeing extraordinary execution and no design shift, including the text style show, preloading, fallback, etc.

next/link

It is no longer necessary to manually add <a> as a child in the next/link.

In 12.2, this was included as an experimental choice; it is now the default. In version 13 of Next.js, <Link> always produces a <a> and lets you pass props to the underlying tag. For example:

 
					 <Link
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app">
          target="_blank"
          rel="noopener noreferrer">
          <div>Hello World</div>
     
          <Image
            src="https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8bmF0dXJhbHxlbnwwfHwwfHw%3D&w=1000&q=80"
            alt="nature"
            width={300}
            height={200}
          />
        </Link>

Next/link will be upgraded to Next.js 13

We’ve supplied a codemod to upgrade your links to Next.js 13 that will instantly update your codebase. For instance, when executed from the root, the following command would apply the codemod to yours./pages directory:

OG Image Generation

Social cards often referred to as open graph graphics have been shown in some studies to significantly improve conversion rates, up to 40% better.

Static social cards take a lot of effort, are tricky to manage, and are prone to mistakes. Social cards are frequently absent or even omitted as a result. Dynamic social cards, which must be customized and computed instantly, have hitherto been challenging and expensive.

We’ve developed a brand-new library called @vercel/og that perfectly integrates with Next.js to produce dynamic social cards.

By utilizing Vercel Edge Functions, WebAssembly, a brand-new core library for turning HTML and CSS into pictures, and the React component abstraction, this method is 5 times faster than competing approaches.

Middleware API Updates

Middleware was included in Next.js 12 to give the Next.js router complete freedom. Your feedback on the first API design has helped us make some changes that will enhance the developer experience and introduce useful new capabilities.

In addition, you can now deliver a response straight from Middleware without rewriting or redirecting.

Conclusion

Using our experience, we have shared the complete information about the new concepts of Next.JS 13. We hope, you got what you want. Moreover, if you have any queries related to Next.JS 13, feel free to share.

We are a leading web development company in USA and India and have delivered countless projects using Next.JS 13 technology. Let’s get in touch if you are looking to hire Next.JS 13 developers.

TAGS : Next.js 13 What's New In Next.js 13?

Categories

What’s New In Next.js 13?