Table of contents
No headings in the article.
It is important to discuss how well-liked and frequently used Next.js is before starting and going over all the new features and enhancements. One of the most popular and well-known React-based frameworks is Next.js, which has more than 2400 contributors on GitHub and more than 200 million downloads since its launch, way back in 2016. At the Next.js Conference, Vercel’s main aim of Next.js 13's modifications is to lessen the amount of client JavaScript needed to run Next.js apps.
With the addition of the app/ directory, the routing and layouts in Next.js are its most notable features (beta). Support for layouts, server components, streaming, and suspense for data fetching are all included in this update.
Prerequisites to use Next.js
The following are required to get started with Next.js
Node.js 14.6.0 or later installed in your system
Basic working knowledge of React and Next.js
Unique and Experimental Next.js 13 Features
React Server Components
React Server Components give developers a means to define components that, by default, have no client impact but can have data requirements linked to them.
Next.js 13's addition of 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 can be automatically cached at build-time or at runtime for extra performance advantages based on the type of data needed to render a route.
Async Components & Data Fetching
The Async component is a new method of collecting data for server-rendered components that are introduced in Next.js 13. We can render components using Promises with async & await when utilizing async components. We declare the component as async and just wait for the outcome if we need to retrieve data from an external service or another API delivering a Promise.
Turbopack
The Turbopack bundler is written in Rust and it is still in alpha development. It is positioned as the replacement for Webpack in Next.js 13, which was released on 25th October 2022. Turbopack is an incremental build mechanism for JavaScript and TypeScript that offers faster performance and better architecture. When working with huge apps, Turbopack is 700 times faster than Webpack, according to Vercel.
Filesystem Improvements
The file system-based routing system of the framework has been improved with app/Directory in Next.js 13 to make it simple to lay up complex interfaces and retain state across navigations without incurring costly re-renders. The file system can be used to define layouts. Additionally, app/Directory brings support for the React Server Component architecture and offers a means to fetch data built on top of React Suspense for Data Fetching.
Updating to Next.js 13
Next.js 13 and the pages directory are stable and ready for production. update Next.js to version 13 today by running:
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
Additionally, features in Next.js 13
For increased performance and privacy, a new font system automatically optimizes fonts, including bespoke fonts, and removes external network queries. The font system also has an automatic zero layout shift that leverages the CSS size-adjust feature, as well as built-in self-hosting for any font files.
To display photos without shifting the layout, an image component is included. The component enables the delivery of less client-side JavaScript and optimizes files on demand for better performance
Open graph pictures known as social cards have been developed using the @vercel/og package, which is compatible with Next.js.
Link API improvements with next/link
The minimum Node.js version is now 14.0.0, while the minimum React version has been increased from 17.0.2 to 18.20.
Conclusion
The Google distinguished engineer and technical advisor to Vercel, “Kelsey Hightower”, attended the Next.js Conf 22 conference in San Francisco, even though Next.js may be considered a rival to Google's Angular web framework.
The framework is maturing in my opinion, even though the new features discussed here touch on several diverse topics. Beginning to convey a strong, cogent story about combining React on the server and the client is Next.js 13, which will also be updated, and impending updates to React itself. This is a fantastic moment to check out Next.js or server-side React if you haven't already!
Further Reading