What's new in Next.js 13.3?

7 April, 2023

Contributors

Kaushal Joshi

@clumsycoder

Next.js is the most popular React meta-framework. It makes building production-ready React apps efficient. The company behind Next.js, Vercel, always thrives on closing the gap between client and server side developments.

Five months ago, in October 2022, Vercel announced the stable release of Next.js 13 at NextJS Conf. It introduced so many important updates to the framework. Most importantly, it added support for app directory and turbopack. Continuing the development, the company released Next.js 13.3 on April 6.

Let's see what it brings our today's blogs.

Prerequisites

An introductory familiarity with Next.js is expected to understand this blog. This includes the following:

API routes in Next.js
Dynamic OG images
The basic directory structure

How to use Next.js 13.3?

You can execute the following command to install the latest version of Next.js:

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

If you are using yarn,

yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

You can upgrade your existing Next app with this command as well. Make sure you don't break any changes before committing any changes.

File-based Metadata API

Vercel announced Metadata API in Next.js 13.2 that allows defining metadata by exporting an object from a layout or page. It was only supported for config-based metadata.

With the new release, the Metadata API supports several new file conventions. This will enable you to customize your pages for improved SEO. Here are the newly supported file conventions and their supported file formats.

opengraph-image.(jpg|png|svg)
twitter-image.(jpg|png|svg)
favicon.ico
icon.(ico|jpg|png|svg)
sitemap.(xml|js|jsx|ts|tsx)
robots.(txt|js|jsx|ts|tsx)
manifest.(json|js|jsx|ts|tsx)

The Metadata API is available in 13.3 for the App Router (app). It is not available in the pages directory. Learn more about file-based metadata and view the API reference.

Dynamic Open Graph Image Generation

Vercel released @vercel/og and Satori to allow you to generate dynamic images using HTML, CSS, and JSX. This feature is now natively available in Next.js without the need to install any external package.

Let's see how you can use Open Graph images in your Next.js app:

// /app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';

export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';

export default function og() {
  return new ImageResponse();
  // ...
}

Import ImageResponse from next/server.
Define size, alt text, file type, style, and other data about the image
Return ImageResponse with the required JSX passed as its parameter.

Static export for App Router

The Next.js App Router now supports fully static exports. You can start developing your application as a static site or SPA and then upgrade to use Next.js features that require a server.

Next.js build can save bundling size and unnecessary JS by breaking a strict SPA into static HTML files. This could result in faster page loads. Static Export works with the app router's new features, including static Route Handlers, Open Graph images, and React Server Components.

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
};

module.exports = nextConfig;

Learn more about Static Export and increase the efficiency of your app.

Parallel Routes and Interception

Next.js 13.3 introduces new dynamic conventions that allow you to implement Parallel allowingand Intercepting Routes. These advanced routing features enable you to show multiple pages in the same view, like with complex dashboards or modals.

Parallel Routes

With Parallel Routes, you can simultaneously render multiple pages in the same view that can be navigated independently. It can also be used to render pages conditionally. Parallel Routes are created using named “slots"". Slots are defined with the @folder convention:

dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── page.js

The layout in the same route segment accepts the slots as props:

// app/dashboard/layout.js

export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();

  return (
    <>
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

In the example above, the @user and @team parallel route slots (explicit) are conditionally rendered based on your logic. children is an implicit route slot that does not need to be mapped to a @folder. For example, dashboard/page.js is equivalent to dashboard/@children/page.js.

Check out the documentation to know more.

Intercepting Routes

Intercepting routes allow you to load a new route within the current layout while "masking" the browser URL. This is useful when keeping the context of the current page is essential, such as expanding a photo in a feed through a modal where the feed is kept in the background of the modal.

Intercepting routes can be defined with the (..) convention, similar to relative paths ../. You can also use the (...) convention to create a path relative to the app directory.

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

In the example above, clicking the photo from the user's profile will open the photo in a modal during client-side navigation. However, refreshing or sharing the page will load the photo with its default layout.

Check out the documentation to know more.

Miscellaneous updates

There are many other changes packed with the latest Next.js version. They are mostly related to design, efficiency, and file structure or accessibility related.

New homepage and showcase page with a new design
create-next-app natively support Tailwind CSS. You can use the --tailwind flag to preconfigure your app.
Prefix a folder with _ to opt it and any child out of routing.

I won't be going through every one in this blog. You can read the announcement blog to read further.

Closing notes

Next.js 13.3 is a significant update that brings new features and improvements to the framework. You can check the official blog post and the documentation for more details and examples. We covered only some of the new features and enhancements that Next.js 13.3 offers.

react

nextjs

latest