Next.js 13.4 , What’s new?
Next.js 13.4 was just released on May 4, 2023 this new update is focused on enhancing the stability of the App Router.
In this article we aim to summarize the release for you so that you do not face the hassle of going through the extensive docs and still stay updated.
The key features that were introduced in this new update were:
App Router (Stable):
React Server Components
Nested Routes & Layouts
Simplified Data Fetching
Streaming & Suspense
Built-in SEO Support
Turbopack (Beta):
Your local dev server, faster and with improved stability.
Server Actions (Alpha)
Enable server-side data mutation without the need for client-side JavaScript.
Next.js App Router
With the release of Next.js 13.4, a more stable and suitable App Router is introduced for integration. In this post, we will look into the design considerations and decisions behind the App Router.
Zero Setup
File-system-based routing has always been a fundamental aspect of Next.js, requiring no additional configuration. Simply placing a file inside the “pages/” directory would automatically be handled by the Next.js router. The simplicity of this approach has been highly valued. However, as the framework gained popularity, developers began to seek improved support for defining layouts, nesting UI components as layouts, and having greater flexibility in defining loading and error states. Every aspect of the framework, including page transitions, data fetching, caching, data mutation and re-validation, streaming, and content styling, is carefully designed around the router. To address these requirements and ensure compatibility with streaming, as well as to fulfill the need for enhanced layout support Next.js 13.4 is introduced.
Changes that came with this new Updates
The new router, which can be gradually integrated using the “app/” directory, has a completely different architecture based on React Server Components and Suspense. This foundation has eliminated the need of Next.js-specific APIs that were initially created to extend React primitives. As a result, you are no longer required to utilize a custom “_app” file for modifying the global shared layout.
With the Pages Router, layouts were not able to be composed, and data fetching could not be collocated with the component. With the new App Router, this is now supported.
With the App Router, you no longer need to import <Html>, <Head>, and <Body> from Next.js. Instead, you just use React.
In the Past, it was only possible to import global stylesheets from external npm packages, such as component libraries, in the “_app.js” file. This approach resulted in a sub-optimal developer experience. However, with the App Router, you have the flexibility to import and collocate any CSS file within any component, improving the development process.
In the past, enabling server-side rendering with Next.js meant that the entire page had to be fully hydrated before any interaction was possible. This approach could potentially block the user from interacting with the application. However, with the App Router, we have restructured the architecture to deeply integrate with React Suspense. This integration allows us to selectively hydrate specific parts of the page while enabling other components in the UI to remain interactive.
Only JavaScript
As Next.js gained more traction and reached a higher level of maturity, the possibility of exploring alternative patterns for data fetching. Initially, the getInitialProps API was introduced, which allowed developers to run code on both the server and the client. This API extended the React component and enabled the retrieval of data, which could then be passed as props to the component.
While getInitialProps still functions in the current version, we further refined the data fetching capabilities based on valuable feedback from our users. This led to the development of the next generation of data fetching APIs: getServerSideProps and getStaticProps.
With the introduction of the App Router, data fetching is performed using the familiar async and await syntax. There is no need to learn any new APIs. By default, all components are treated as React Server Components, enabling secure server-side data fetching.
With the App Router, you have the freedom to fetch data and compose components as you see fit. This applies not only to first-party components but also to any component within the Server Components ecosystem.
The integration of the router with React Suspense allows for a more seamless display of fallback content while certain parts of your content are loading. This enables you to progressively reveal the desired content, resulting in a smoother and more fluid user experience.
Automatic server rendering and code splitting
When Next.js was initially developed, it was common for developers to manually configure various tools such as webpack and babel to set up a React application. Implementing optimizations like server rendering or code splitting was often overlooked in custom solutions. React frameworks, including Next.js, emerged as a way to abstract and enforce these best practices.
One of the optimizations introduced by Next.js was route-based code splitting. In this approach, each file in the “pages/” directory would be split into its own JavaScript bundle. This helped reduce the overall file size and improved the initial page load performance.
This feature was beneficial for both server-rendered applications and single-page applications using Next.js. The latter often suffered from loading a single large JavaScript bundle during application startup. However, implementing component-level code splitting required developers to use “next/dynamic” to dynamically import components.
The App Router introduces a significant change where Server Components are no longer included in the JavaScript bundle meant for the browser. By default, client components are automatically code split using either webpack or Turbopack in Next.js. Moreover, leveraging the streaming and Suspense capabilities of the router architecture, it becomes possible to progressively send different parts of the UI from the server to the client, enhancing the overall user experience.
Turbopack (Beta Version)
Turbopack, a new bundler currently undergoing testing and stabilization within Next.js, aims to accelerate local iterations while developing your Next.js application and, in the near future, during production builds
Although Turbopack does not yet offer complete feature parity with webpack and Next.js, However, for the majority of use cases, Turbopack should now provide sufficient support. The beta phase of Turbopack focuses on resolving any remaining bugs that arise from increased adoption and preparing for stability in future versions. Turbopack will not only enhance the speed of local development but also extend to faster production builds in the near future.
Server Actions (Alpha)
Server Actions in Next.js are designed to seamlessly integrate with the entire data lifecycle, encompassing features like the Next.js Cache, Incremental Static Regeneration (ISR), and the client router.
The introduction of new APIs, such as revalidatePath and revalidateTag, allows for efficient data revalidation. This means that actions like data mutation, page re-rendering, or redirection can occur within a single network roundtrip. As a result, the correct and up-to-date data is promptly displayed on the client, even if the upstream provider experiences delays or slowness.
While declaring the stability of the App Router today signifies a significant milestone but it does not indicate the completion of App Router. Stability, in this context, signifies that the core functionality of the App Router is production-ready and has undergone extensive testing, both internally and by early adopters of Next.js.
However, the work is not yet finished, and there are plans for further optimizations in the future.
