How to use Prismic with Next.js 13 App Router

🎉 June 14th Update: Draft Mode (Preview) is now fully supported with Prismic and Next.js App Router, check out the docs here:
prismic.io/docs/setup-nextjs#...
The Next.js App Router and React Server Components, two recently released innovative features, are great tools to build websites with Prismic.
The Next.js App Router introduces simple patterns to create performant, maintainable websites. It makes it easy to create global layouts, handle fine-grained dynamic URLs, and fetch data efficiently. The Next.js App Router is the successor to the Pages Router you may already be familiar with.
React Server Components unlock a whole new set of possibilities for frontend apps. As the name suggests, Server Components are rendered on the server and do not send any JavaScript to the browser. They simplify data fetching and lead to more performant websites.
The App Router is built upon Server Components, providing an exceptionally good development experience and a highly performant website.
In this tutorial, you’ll learn the best, most up-to-date way to develop Next.js websites with Prismic, the Next.js App Router, and React Server Components.
🔗 Live Demo nextjs-tutorial-app-router.ve...
🔗 GitHub Project github.com/prismicio-communit...
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
• Next.js Full Website T...
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
• Nuxt 3 Crash Course - ...
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
Chapters:
📍00:00 Overview of the App Router
📍00:44 App Router's file structure
📍02:51 Fetching content
📍05:47 Creating pages
📍07:06 Creating layouts
📍08:12 Creating Slices
📍09:52 Experimental preview support
📍14:50 Using On-demand Revalidation
📍17:45 Wrap up

[@jcnesci]

Newbie here: Is there a way to copy the Prismic repository so I can create my own copy and continue from there? Or must I start from scratch? Thanks

[@Prismic]

The guide assumes you’ll be starting from scratch, but you can start a new project using the GitHub repository as your base. You can clone the code and create a new Prismic repository with these commands: npx degit prismicio-community/nextjs-tutorial-app-router nextjs-tutorial-app-router cd nextjs-tutorial-app-router npx @slicemachine/init@latest Then go into Prismic and create the Settings and Homepage documents. We have a more in-depth tutorial here: prismic.io/blog/how-to-use-prismic-with-nextjs-app-router

[@thomas-sinkala]

Probably best to use VS code standard file manager, it makes following along easier.

[@james-dd39]

How do you set up internationalisation with App Router? There is a video on this topic for Next 13 but it doesn't use App Router and there is no mention of how to set this up in your docs.

[@sntiagomoreno]

How do you fetch linked content data from relationship fields correctly within slices using this version of Next?

[@Prismic]

Hey! Check out the docs on fetching linked data here: prismic.io/docs/fetch-data-nextjs#fetch-linked-data

[@jeremytenjo]

Prismic + Nextjs = ❤

[@xeon789]

WHY PRISMIC WHEN WE ALREADY HAVE MONGO DB. PLEASE LET ME KNOW THANKS IN ADVANCE.❤. NICE VIDEO

[@Prismic]

Mango DB requires you to make DB queries. With Prismic you can have a UI to edit your content

[@Boutbn]

Anyone else getting errors..? This tutorial is not working for me.

[@angeloashmore2518]

What kind of errors are you getting? If it can't fit here, you can post a question in the Prismic community forum.

[@Boutbn]

@@angeloashmore2518 “Unsupported server component type” when trying to build my application on Vercel. I have almost the exact same code as you. The only thing I am missing is the cache rule with the .env options but your example does not contain a env.example sadly

[@angeloashmore2518]

​@@Boutbn The example project doesn't use any .env files or environment variables on Vercel. Caching is controlled using the `fetchOptions` property in `prismic.createClient()`. If you post a message on the forum with the code that is causing the error, I or someone on the team can take a look. 🙂