May 18, 2023·2 min read

Use the Next.js App Router with Prismic Today

Next.js 13.4 introduces a new way to write web apps called the App Router, which we now support with our React and Next.js packages.

The App Router includes significant new features, including React Server Components support, async/await data fetching, streaming with Suspense, and more. Your app’s code can be more concise and more performant than before.

We recommend building new Prismic websites using the App Router and migrating existing ones as soon as you are able to.

TL;DR

Prismic and Slice Machine support Next.js App Router.
You can provide feedback on GitHub: @prismicio/react, @prismicio/next.

How is the App Router different?

The App Router, also known as the app directory, enables you to build Next.js apps using simpler, more powerful patterns compared to the traditional Pages Router. Layouts, metadata, and complex routing are now just a file or const declaration away.

Best of all, the App Router has simplified data fetching dramatically. Common Next.js patterns like getStaticProps() have been removed in favor of fetching data directly in components.

With the App Router (the new way):

// src/app/page.tsx

import { createClient } from '@/prismicio'

export default async function Page() {
  const client = createClient()

  // Call the Prismic client right in your component!
  const page = await client.getByUID('page', 'home')

  return <h1>{page.data.title}</h1>
}

With the Pages Router (the old way):

// src/pages/index.tsx

import { createClient } from '@/prismicio'

export default function Page({ page }) {
  return <h1>{page.data.title}</h1>
}

// Data must be fetched separately from your component.
export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData })

  const page = await client.getByUID('page', params.uid)

  return {
    props: { page },
  }
}

React Server Components

The App Router uses React Server Components by default. Server Components let you render components on the server—and only on the server—without sending any JavaScript to the browser. This increases performance and lets you write server-only code that you previously could not, like calling databases and using secret keys.

These features build on top of the existing React techniques developers know, and they can be adopted incrementally. You can still write interactive Client Components and use your favorite third-party libraries in the App Router.

Updated Prismic support for the App Router

Prismic supports this new way of building Next.js applications if you use Slice Machine and the latest versions of our packages.

Be sure to use at least these versions of the Prismic packages when using the App Router:

Slice Machine ≥ v1
@prismicio/react: ≥ v2.6.0
@prismicio/next: ≥ v1.1.0

@prismicio/next also now includes <PrismicNextLink>, a straightforward way to render links from Prismic with no configuration required.

import { PrismicNextLink } from '@prismicio/next'

<PrismicNextLink field={page.data.myLinkField}>
  Click me!
</PrismicNextLink>

These package updates are backward compatible with Next.js apps using the Pages Router. Update now so you’re ready when you migrate to the App Router.

Prismic’s documentation includes guides on using both the App Router and Pages Router. Technical References for each package are also available.