At their developer conference last month, Vercel unveiled version 13 of Next.js. The new release is now in beta, adds a tonne of intriguing new capabilities, and makes server-side rendering for React and how it connects with interactive client-side components more compelling and coherent.
In this article, we will introduce Next.js before delving into some of the new features in Next.js 13 and explaining their significance.
What is Next.js?
Next.js is a flexible React framework that gives you the tools you need to build quick web applications. The Next.js development framework builds on React by enabling server-side rendering, more server-side functionality, and enhanced development and deployment toolchain.
The crucial advantages of server-side rendering with Next.js are performance and SEO. By rendering on the server, the fully-rendered starting state of an application is delivered on a single request. A search engine can index the content as a result, which means the browser will have to perform less effort. To further boost efficiency, displayed data can be cached if required.
Along with other capabilities, these features from Next.js can enhance React's solid basis and address some of the drawbacks of a solely client-side approach. Next.js is a massive addition to the stack for any application where performance and SEO are vital.
Click here to Read: 10 Ways to Improve Your Next.JS App Performance
Now that you know more about Next.js let's explore what the Next.js 13 release has brought us.
What's New in Next.js 13?
Next.js 13 is the first comprehensive effort to integrate React's two identities—the UI Library and the Architecture. So, what's new in it?
1. App/Directory for File-Based Routing:
File-based routing is one of Next.js's best features. Routes can be specified using the directory project structure instead of dealing with complicated route settings in a program like react-router. You can construct a new path by adding an entry point to the directory page.
On top of this idea, Next.js 13 offers revised file routing with the new directory. The optional app directory brings a new layout structure with several additional features and improvements.
The directory structure has undergone minor changes due to the new routing mechanism. Each path in the route has a dedicated directory with a page.js file that serves as the content entry point in Next.js 13. It is how the new routing is different from the previous one.
| Route | Next.js 12 | Next.js 13 |
|---|---|---|
/ | pages/index.js | app/page.js |
/blog | pages/blog.js. | app/blog/page.js |
/blog/new | pages/blog/new.js | app/blog/new/page.js |
The new structure enables us to include additional files in each path directory. Also, the page.js for a route, such as
- layout.js - A system for the path & its sub-paths.
- loading.js - A system for an instant loading state using React.
Suspense under the hood & error.js, a component is displayed if the primary component cannot load. We can now co locate source files inside our path directories because each path is now its directory.
A fantastic feature that has always existed is file-based routing, and the new app/ directory improves upon that. The content routes mirror the content directory structure, which streamlines development and helps bring back the utmost simplicity of constructing more static pages.
Also Read: State Management in Next.js
2. React Server Components:
Next.js 13's additional support for React server components is the most intriguing new feature. For quicker delivery, a smaller JavaScript bundle, and less expensive client-side rendering, server components enable us to execute and render React components on the server side.
Additionally, server components are automatically cached at build-time or runtime for extra performance advantages based on the type of data needed to render a route. You will need to structure your application following as server & client components' capabilities differ somewhat.
The capabilities of the two different components are listed in the following table. It is derived from the documentation & the applications for which they are highly supportive.
You can combine server and client components, employing server components for quickly loaded, non-interactive portions of your application while relying on client components for interactivity, browser APIs & more.
You can use the 'use client'; directive at the top of the file to designate it as such when creating client components for your Next.js application. However, you might need to make a client wrapper for any third-party packages you use.
Also, Read: NextJS vs ReactJS: Which JavaScript Framework is Best?
3. Async Components & Data Fetching:
Async components, a new method of data collecting for server-rendered components, are also introduced in Next.js 13. We can render systems using Promises with async & await when utilizing async components.
If a Promise-returning external service or API needs to be queried for data, we declare the component as async and wait for the outcome:
async func getData() {
const res = await fetch ('https://api.example.com/...');
return res.json();
}
export default async function Page() {
const name = await getData();
return '...';
}
To resolve the request data outside of the component's lifecycle and use it as component props, previous iterations of Next.js required a completely new API. The following example demonstrates a Next.js 12 method for obtaining data from a third-party service:
// This gets called on every request export async function getServerSideProps()
{
// Fetch data from external API
const res = await fetch(https://.../data)
const data = await res.json()
// Pass data to the page via props return
{ props: { data } }
}
Even though it is not included in the new app/ directory, the earlier method is still supported. You'll need to upgrade your server components to get benefitted from the new app/ directory structure and its exciting new capabilities. However, you can still use the Next.js 12 pages/routing for your app if you're not ready to.
4. Streaming
Users may have to wait for the entire page to generate before accessing them. As the UI is generated, the server will send small bits of it to the client. It implies that larger chunks won't obstruct smaller ones. Of course, right now, this feature is only supported in the app directory, and it doesn't appear that this will change.
This new addition won't help those with fast Wi-Fi or access to a strong internet connection as much as those with poorer connections. Contrary to what you would have expected, there are more people like this. It's excellent that they can have a better experience with faster web loading speeds.
5. Turbopack
As the "successor to Webpack," a new JavaScript bundler named Turbopack was the final significant update made with Next.js 13 release. One of the most popular JavaScript build tools, Webpack, is incredibly customizable and powerful but may occasionally be sluggish and cumbersome.
The developers of Webpack have created Turbopack, which is built in Rust and promises to be 700 times quicker than the original Webpack (and 10x faster than Vite, a more modern alternative).
One change is that Rust can create plugins rather than JavaScript. The number of JavaScript developers proficient in the systems language is significantly less than the total number of JS developers.
Using next dev —turbo to launch your development server, you can test out the new Turbopack bundler if you build a new Next.js 13 app.
6. Other upgrades
Along with specific enhancements to the functionality of links in Next.js 13, additional packages are on the way and might speed up your images and font loading. In both the pages directory and the app, they function identically.
1. next/image
Less client-side JavaScript, styling and configuration, and increased accessibility are all features of the new Image component in Next.js. The next/image import has been changed to next/legacy/image, and the next/future/image import has been renamed to next/image in terms of code modifications. There is a codemod to facilitate rapid migration.
2. next/font
The new @next/font allows you to use Google Fonts (or any custom font) without the browser sending any queries. CSS and font files are downloaded at build time with other static assets.
3. next/link
It's a new font system that offers automatic font optimization, the ability to include custom fonts & all these things with no external network queries for increased privacy and efficiency.
Also, Read: An ultimate guide to build PWA with Next JS
What's next?
The beta version of Next.js 13 is so early that it practically qualifies as an alpha. It often doesn't even integrate cutting-edge features from the newest React that are still in the RFC stage but are used extensively.
There are no documentations and bugs that might break your code, and error reporting is still in its infancy. However, feel free to experiment with it on your personal computer. With this update, Next.js becomes even more of a framework with a "powerful backend that just so happens to have a capable frontend."
The verdict? We suggest that you try it but avoid using it in production.
