Next.js 13.4: The Latest Release Packs Many Powerful Features

NextJS have marked v13.4 with a stable App Router, TurboPack (Beta) and Server Actions. In this blog, we will talk about all the latest release and features provided with it.

Here is a list of features released in v13.4:

• App Router
• TurboPack (Beta)
• Server Actions (Alpha)

App Router

App router was introduced with version 13 with React Server components, Layouts and Streaming. With 13.4 App router has the following additions also it can be incrementally adopted without unnecessary breaking changes.

• Layouts: Easily share UI between routes while preserving state and avoiding expensive re-renders.
• Server Components: Making server-first the default for the most dynamic applications.
• Streaming: Display instance loading states and stream in units of UI as they are rendered.
• Simplified Data Fetching: async Server Components and extended fetch API enables component-level fetching.
• Built-in SEO Support: New Metadata API to set static and dynamic meta tags.

Turbopack

Turbopack was introduced by Vercel around 6 months ago with NextJS 13. They have been working to stabilize the bundler through NextJS and it helps in speeding up local iterations while working on NextJS applications (through next dev — turbo) and soon our production builds (next build --turbo).

Turbopack does not yet have full feature parity with Webpack and NextJS. Vercel is working on fixing the remaining bugs. They are working on improving the incremental engine and caching layer of Turbopack which will speed up the local development.

Server Actions

Developers can write server-side functions in normal React/NextJS components which will only run on the server. It enables developers to mutate data on the server, calling functions directly without needing to create an in-between API Layer.

With Server Actions, we have powerful server-first data mutations, less client-side Javascript and progressively enhanced forms. It is designed to have deep integration with the data lifecycle, including the Next.JS Cache, Incremental Static Regeneration (ISR) and the client router.

Let's see an example of the code.

// app/dashboard/posts/page.tsx (Server Component)

import db from './db';
import { redirect } from 'next/navigation';

async function create(formData: FormData) {
  'use server';
  const post = await db.post.insert({
    title: formData.get('title'),
    content: formData.get('content'),
  });
  redirect(`/blog/${post.slug}`);
}

export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  );
}

Revalidating through new APIs revalidatePath and revalidateTag mean that mutating, re-rendering the page or redirecting can happen in one network roundtrip. This ensures the correct data is displayed on the client, even if the upstream provider is slow.

// app/dashboard/posts/page.tsx (Server Component)

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');
}

export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['posts'] } });
  const data = await res.json();
  // ...
}

Server actions are composable and anyone can build and publish server actions to share/distribute in the ecosystem. Server actions are available in v13.4 and in the Alpha release. To enable server actions we need to modify NextJS config.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

Conclusion

NextJS are continuously evolving and adding new features to help and make the developer's life easy with all the updates. It is becoming my favourite framework now with all these features. I have provided some feature details on release 13.4, you can check full detail on official blog of NextJS here.