⚡ Unlock faster workflows with Prismic’s newest features!See what's new and upcoming
Prismic Announcements
·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

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.

Providing feedback or getting help

We’d love to hear your feedback on the updated Prismic packages.

🐛 Reporting a bug

If you come across a bug, feel something is weird, or have an idea for an improvement, please share it with us on GitHub.

❓ Asking a question

If you have any questions on how to develop with Prismic, ask on the Prismic Community forum.

💬 Share your experience

Lastly, let us know how your experience with the App Router and Prismic went by posting your project in our Showcase channel.

Have fun building with the App Router and Prismic! 🚀

Article written by

Angelo Ashmore

Senior Developer Experience Engineer at Prismic focusing on Next.js, React, and TypeScript.

More posts

Join the discussion

Hit your website goals

Websites success stories from the Prismic Community

How Arcadia is Telling a Consistent Brand Story

Read Case Study

How Evri Cut their Time to Ship

Read Case Study

How Pallyy Grew Daily Visitors from 500 to 10,000

Read Case Study