Next.JS version 13: Latest Features and Upgrade Guide

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:

• Compiler Infrastructure
• Rendering Infrastructure
• Component Toolkit

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,

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

Additionally, Turbopack provides a wide range of features to have these fast and flexible development services:

• Incremental by design that performs tasks like never before
• Eco-system friendly (support for TypeScript, JSX, CSS, CSS modules, Web Assembly, and more)
• Lightning-fast HMR regardless of the size of your app
• Native support for React server components
• Simultaneous multiple environment targets
• Power to production builds both locally and in the cloud

# 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.

Read the complete post here: https://bit.ly/3gu8qRH