Adarsh MWhat is new in Next JS 13?
Next.JS is a JavaScript framework that enables you to build superfast and user-friendly static websites, as well as dynamic web applications using React. Compared to other competitors in the market, Next.JS offers many advantages.
Over 2,400 individual developers, as well as the core team and business partners like Google and Meta, contributed to the creation of Next.JS. One of the most well-liked techniques for building the Web is Next.JS, which receives over 4.2 million npm dowaàanloads weekly and 96,300 GitHub stars.
As per npmjs, Next.JS garners close to 4,214,306 weekly downloads, whereas React, its parent, has 19,247,427 weekly downloads.
Source: https://npmtrends.com/next-vs-react
At the recent Next.JS conference, Next.JS 13 was released. Many new features are included, including routing, a new way to fetch data (React suspense), Vercel fonts, OG image generation, and layouts.
In this detailed blog, we are going to cover all the new changes that have been introduced in Next.JS 13.
So let’s get started!
Is Next.JS 13 something we should know?
Next.JS has been a popular React-based framework for a long time. Vercel, the Next.JS creators, recently announced that Next.JS 13 is now live. Some of the advantages of using Next.JS have been listed below.
Great SEO: Using Next.JS will improve your SEO results a lot. Because Next.js websites are fast, easy to scan and provide a great user experience, Google will favor them above others.
Lesser loading time: Because static websites are fast by nature, Next.JS web apps and websites will perform well.
Image optimization. Next.JS has built-in image components and automatic image optimization, which will optimize all the images used in it.
Fast Refresh: Next.JS is a developer-friendly tool; one reason for this is that changes made during development are immediately visible on the website; there is no need to reload the entire server.
Great developer experience: This is the most appreciated part of Next.JS. We will spend more time writing features for our application than working on build tools and configuration.
Automatic code splitting: Each page in your Next.js is code split automatically. This means that your application’s bundle size will not increase as it adds more and more pages.
There are several more reasons why Next.JS is preferred over its competitors, like Gatsby.
What are the changes in Next.JS 13?
Next.JS 13 has introduced many new features that have the potential to be really game-changing and incredibly fast. Some APIs have been added to the stable core and are now recommended for use, while others are still under the experimental label. Let’s look at the most interesting features of the new release.
Turbopack – A Rust-powered successor to Webpack
Until now, Next.JS used Webpack as a module bundler under the hood, but in version 13, they introduced Turbopack, a rust-based successor to Webpack, which is a game changer.
This is unquestionably one of the best developments for Next.JS and Turbopack. The next-generation bundler for the Web will be a brand-new build tool called Turbopack, which is being led by Tobias Koppers, the man who created Webpack. It was built from the ground up, with rust.
Source: https://turbo.build/pack
Turbopack is blazingly fast. Turbopack takes up to 1.8 seconds during startup compared to Webpack, which takes 16.5 seconds. Using Turbopack alpha with Next.JS 13 makes your app update 700x faster than Webpack, 10x faster than Vite, and 4x faster than Webpack cold starts. This is something huge for the entire ecosystem.
According to the Turbopack team, Turbopack has incremental behavior and adaptable bundling strategies; Turbopack provides a fast and flexible development experience for apps of any size.
Although it is currently in alpha, Webpack has a massive ecosystem of plugins that can make migration difficult for existing apps. Since this feature is experimental, we can only use it in the development environment, and it is not supported for production builds as of now.
New Routing System
Next.JS has a built-in routing system, and when we add new files to the pages folder, it will automatically create routes in our application.
With the introduction of the app directory, Next.JS is enhancing the routing and layout experience and aligning with the future of React. The app directory file-system-based router is an upgrade to the Next.js page routing system. This feature is currently in beta, and more features are likely to come soon.
The app directory includes support for:
- Layouts: Easily share user interface (UI) between routes while maintaining state and preventing costly re-rendering.
- Server Components: Making server-first the default for the most dynamic applications.
- Streaming: Show instant loading states and stream in UI units as they are rendered.
- Support for Data Fetching: The async Server Components and extended fetch API supports component-level fetching.
All of these bring new possibilities for improving the performance of the app as well as the framework.
Data Fetching
One of the features offered by the app directory is a powerful new method of data fetching built on top of React Suspense for Data Fetching.
This is significant because it allows us to completely replace previous Next.js APIs like getStaticProps and getServerSideProps and write a plain JavaScript function that uses fetch and then awaits the result of that function directly.
The new data fetching system works in the app directory and is built on top of the fetch() Web API. You can use async/await to asynchronously fetch data in server components created with JavaScript await syntax, with performance benefits such as automatic caching.
The Image Component
The powerful new Image component in Next.js 13 makes it simple to display images without layout shifting and allows you to perform on-demand file optimization for better performance.
According to the Vercel team, the new Image component has various merits, like:
- It now ships lesser client-side JavaScript
- Now, styling and configuration options are simpler than before.
- More accessible and it requires alt tags by default
- Faster because native lazy loading doesn’t require hydration
- Align with the Web platform,
Updates to next/link
The new next/link component no longer needs manually adding an <a> tag as a child!
import Link from “next/link”
//Next.js 12: <a> has to be nested inside <Link> for client-side navigation to work.
export default function Test() {
return (
<Link href=”/”>
<a>Home</a>
</Link>
)
}
//Next JS 13: <Link> always render <a>
export default function Test() {
return (
<Link href=”/”>
Home
</Link>
)
}
A new font system – @next/font
The Next.js team has unveiled a totally new font system. With performance and privacy in mind, you can use all Google fonts with this new system.
Some of the advantages of this new font system include:
- It will automatically optimize all of the fonts.
- It removes the hazard of external network requests for improved privacy and performance
- During build time, CSS and font files are downloaded and self-hosted along with the rest of your static assets.
- While still ensuring great performance and no layout shift, you can customize every aspect of the font loading process.
- Custom fonts are also supported.
Open Graph Image Generation
To generate dynamic social cards, the Vercel team introduced the @vercel/og library that works seamlessly with Next.js. A social card is a description, image, and title that appears when you share your website link on another social platform. Social cards are important as they can result in higher conversion rates.
With this library, a dynamic social card can be created that can be personalized and computed on the fly.
import { ImageResponse } from “@vercel/og”;
export default function () {
return new ImageResponse(
(
<head>
<title>Title</title>
<meta property=’og:title’ content=’Title’ />
<meta property=’og:description’ content=’Description’ />
<meta property=’og:image’ content=’https://example.com/image.png’ />
</head>
)
);
}
What are the breaking changes in the Next 13?
When there is a significant update, we need to migrate to the most recent version by following a few steps. The situation with Next 13 is also the same. The following lists a few of Next 13’s ground-breaking changes.
- The bare minimum React version for Next.JS 13 is React v18.2.0.
- Since Node 12.x has reached end-of-life, the minimum Node.js version has been increased from 12.22.0 to 14.6.0.
- The next/image import was renamed to next/legacy/image. The next/future/image import was renamed to next/image.
import Image1 from “next/image”
import Image2 from “next/future/image”
// Changes to 👇🏻👇🏻👇🏻
import Image1 from “next/legacy/image”
import Image2 from “next/image”
4. The Routes are now no longer prefetched when the User-Agent is set to bot.
5. The next/link child can no longer be <a>.
export default function Page() {
return(
<Link href=”/about”>
<a>About</a>
</Link>
)
}
// 👇🏻👇🏻👇🏻👇🏻
export default function Page() {
return(
<Link href=”/about”>
About
</Link>
)
}
6. The deprecated target option of next.config.js has been removed.
7. Internet Explorer has been removed from the list of supported browsers in favor of more recent ones. You can still use Browserslist to change targeted browsers.
-
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+
We have seen the notable features of Next. JS 13 and now we can look into how we can actually migrate to Next 13.
Migrating to NextJS 13
In order to use NextJS 13, we need to have a minimum Node.JS version of v14.6.0. You can upgrade to the latest version, which is 18.12.1, or version 14.6.0 itself.
To update to Next.js version 13, run the following command using your preferred package manager:
npm install next@latest react@latest react-dom@latest eslint-config-next@latest
# or
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
# or
pnpm update next@latest react@latest react-dom@latest eslint-config-next@latest
After upgrading the versions, you can start upgrading to the latest new features in Next 13 such as using the updated Image component, Link component, Script component, Font optimization, etc.
Wrapping It Up!
Congratulations on reaching this far! You’re a fantastic reader!!
In this detailed blog on Next.js, we looked at the new changes that have been introduced in Next.js. Next.js is one of the popular front-end frameworks and aids in building the Web, and it’s constantly evolving.
We have covered all the important new features that are included with NextJS 13. Not only that, but we have also covered the breaking changes and steps to migrate our Next app.
You now have a thorough understanding of everything that Next 13 has to offer.
Happy Nexting!
Ajay Yadav
Add comment