What's new in Next.js 13?
Next.js brings us various layout formats, turbo packs, and more treats, including the sensational decrease in client-side JavaScript. The new way to organize your Next.js applications is opt-in and can be embraced gradually for a smooth adoption.
New elements will make creating performant web applications more straightforward and accessible. Next.js 13 accompanies server components empowered as a matter of course. Is Next.js 13 improve our projects? In This blog, we will dive deep into the new changes that Next.js brings to us.
On the 25th of October, At Next.js conf (the meeting where developers figured out what the engineers of the most popular React framework updated for them).
All who turned up for the stream or the in-person occasion saw the presentation of the following significant version of the framework - Next.js 13. The view was very something - the new version is entirely different in numerous ways from its predecessor.
Let's start!!!
It changed a considerable amount in countless ways - the organization guaranteed the update would be the most significant change to Next.js of all time. Was it? We watched the entire conference for you; however, if you want to watch, go for it first; otherwise, let's check out the significant changes.
Routing changes
The main change we see is the way routing is dealt with it. Previously, we were expected to make a pages part for routing. Be that as it may, everything inside the app folder turns into a route now.
The essential part is that we are supposed to go over the upgrades at different times, as the structure of our pages will continue to work. We can relocate to the app layer as we go.
Layouts Update
This new change in routing empowered us to make more perplexing connection points. For instance, inside the app index, we can make a dashboard folder with individual layout design parts. The essential page inside this folder can have the principal construction of the page, while close to it, we can have a layout.js file for the simple layout design of this arrangement of components.
Besides these two file records, we get a few fantastic unique files we can utilize:
- loading.js: A discretionary file to make loading components for this particular application components.
- layout.js: Characterizes the familiar layout across numerous pages inside this folder.
- page.js: The particular UI for the page is characterized as the folder name.
- template.js: A discretionary file like the layout; however, while exploring, another part is mounted, and the state isn't shared. It may be utilized when you want to enter/exit animation on a page.
- head.js: A discretionary file can be utilized to characterize the <head> for this file subsection.
Server Components
Another update regarding the routing change is the capacity to help server parts. The thought is that this will assist with making a quicker page load and less JavaScript on the end page. Every one of your parts inside the application directory is a server part. When a route is loaded, the Next and React runtime will be stacked, which is cacheable and unsurprising in size.
The runtime won't increase in size, and it's stacked async. It empowers your HTML to be loaded from the server and afterward upgraded by the client/user. You can, in any case, check components on the client side only. It could be helpful when you want intuitiveness, occasion audience members, or state.
Streaming-Driven
We get a streaming-driven arrangement on the off chance that we take over two components. It implies our application can deliver static elements without hanging tight for every component that needs data fetching or slow load.
Every server-rendered component can get some margin to render; however, the client now sees the primary layout design and loading parts for those server-side components that are as yet loading. This influential idea permits us to give a superior user experience.
Data Fetching
With the availability of server-side components, we get a new and robust method for fetching data inside parts. A fundamental example of a component fetching information from a particular API is shown below:
/ app/page.js
async function getData() {
const res = await fetch('https://api.example.com/...');
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
return res.json();
}
// This is an async Server Component
export default async function Page() {
const data = await getData();
return {/* ... */} ;
} They stretched out the native fetch API to React/Next, so everything utilized one adaptable approach to fetch information. All that truly matters is every one of the advantages of the past executions into one.
Turbopack
. 700x quicker than Webpack.
. 10x quicker than Vite.
. 4x quicker cold beginning contrasted with Webpack.
Turbopack is written in Rust, which has shown to be the super-quick language on the block for different devices. Hence, there are high expectations for this one.
New Plugins
There are likewise a significant number of new/redesigned modules, which we won't plunge into an excess of detail; however, they are right here:
. next/picture: Next.js 13 ships another picture component, which accompanies many updates, less JavaScript, is more straightforward to design, and is quicker.
. next/text style: A shiny new text style that can be utilized to load optimized forms of textual styles.
. next/link: Essentially, a redesigned developer's experience by requiring less configuration.
OG Images
We get another incorporated approach to creating OG images, which could be a trouble spot because of the loading your pages would utilize. This new plugin addresses many of these trouble spots.
This approach is 5x times faster than existing solutions in WebAssembly, and the latest new core library for converting HTML/CSS into images and, later on, leveraging the React component abstraction.
Middleware API Updates
Next.js 13 improves the Middleware API feature. Before a request, middleware is code processed on a site. You can modify an incoming request and add some logic before the request is processed.
Now it is easier for us to set headers in the middleware. Also, you can directly return a response from the middleware. Now there is no need to rewrite or redirect. But to execute this, we need to enable the configuration experimental.allowMiddlewareResponseBody inside next.config.js.
As we have already said goodbye to Node 12, we need to consider a few things before any upgradation:
. You need to upgrade your containers/change your current circumstance, and (at least) embrace Node 14.
. New changes in the functionality of navigation hooks.
. Minifying by SWC is the new default.
. next/image you utilized is the next/legacy/image. We can do this by migrating this to a new next/image, running the codemod.
. The new next/connect automatically add an anchor tag, where beforehand you needed to have one;
That's it!
This new version brings stunning and powerful features for the developers in a straightforward way, making some of them work out of the box. With minimal knowledge about ISR, SSG, or SSR theories also, you can take advantage of rendering techniques' benefits in one solution.
The Next 13 is loaded with a ton of better-than-ever things. Quick to evaluate how they worked on the speed of everything. Also, quick to perceive how everything works in any app. This may be why the organizations have a solid sense of security using Next.js underway.
If you want to have your application moved to Next.js 13, need another webpage running on the most well-known React framework, or need to talk about building your web application, go ahead and reach us now.
Any queries, questions, or suggestions? Drop them in the comment section. Thanks!!!
Read More:
Comments
Post a Comment