Tag: Router

Exploring Next.js 13.4: Stable Release of App Router and Future of Server-rendered React Apps

In this post, we take a deep dive into the latest foundational release of Next.js, a game-changing framework for server-rendered React applications. We will discuss the highlights of the new 13.4 version, with particular focus on the stability of the App Router feature.

Table of Contents

Introduction

Next.js, since its inception in 2016, has been providing a seamless way to server-render React applications, with the overarching objective of creating a dynamic, personalized, and global web. With the release of 13.4, the App Router is now deemed stable and ready to be adopted in production environments.

To install the latest version, use the following commands:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

The Birth of Next.js

Next.js was envisioned to facilitate server-rendered React applications employing a few key design principles:

  • Zero setup with the file-system as an API.
  • Everything is a function with only JavaScript required.
  • Automatic server rendering and code splitting.
  • Freedom to developers regarding data fetching.

After six years, a significant upgrade to the framework has been put forward to better achieve these design principles.

Streams and Routers

Since inception, the file-system based routing in Next.js has been a unique and user-friendly feature:

// Pages Router
import React from 'react';
export default () => <h1>About us</h1>;

This approach led to requests for enhanced support for layouts and flexibility in defining loading and error states. However, this was not easy to implement, given the existing router’s design.

Building a new version of the router was essential to cater to these needs and make the router compatible with streaming.

The Evolution of App Router

With the old Pages Router, layouts could not be composed, and data fetching could not be collocated with the component. However, with the new App Router, these limitations have been overcome:

// New: App Router ✨
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}
// Layouts can be nested and composed
export default function DashboardLayout({ children }) {
    return (
        <section>
            <h1>Dashboard</h1>
            {children}
        </section>
    );
}

Introducing Server Actions

The new feature, Server Actions, enables powerful server-first data mutations, reducing client-side JavaScript, and progressively enhanced forms. It allows seamless interaction with the rest of the data lifecycle, including the Next.js Cache, Incremental Static Regeneration (ISR), and the client router.

import db from './db';
import { revalidateTag } from 'next/cache';
async function update(formData: FormData) {
    'use server';
    await db.post.update({
        title: formData.get('title'),
    });
    revalidateTag('posts');
}

The Future of Next.js

With marking the App Router as stable, Next.js has reached a significant milestone, post rigorous internal testing, and validation from many early adopters. And while further optimizations are in the pipeline, this milestone marks the path for clarity for where developers should start learning and building applications today.

Please note: The new features can be adopted on a per-route basis. Hence, you don’t need to migrate all your pages/ to app/ at once.

Next.js has always aimed to create more user-friendly, dynamic and cutting-edge applications on top of the React architecture. With the success of Server Components and App Router, we believe we’re moving in the right direction.

Tags: #Next.js, #React, #App Router, #Server-Rendering
Reference Link