Hey @gabriel,
I'm glad to hear you have everything else working in the App Router! 
We don't have the updated Preview + App Router docs published yet, but I can share fragments of it here.
The Next.js team is working on the proposal described in the discussion above which will ultimately replace the strategy explained below. However, much of the implementation will use the same APIs (<PrismicPreview>, enableAutoPreviews(), etc.).
When an updated version of Next.js is released with Draft Mode + cookies() support, we will post an updated guide with the correct usage.
Until then, here's how you can use previews today with the App Router and dynamic rendering (content taken from an draft version of an upcoming tutorial).
If you have any questions, please leave them here. Thanks! 
Set up createClient()
Ensure your createClient() function uses the following fetchOptions and calls enableAutoPreviews().
// src/prismicio.js
import * as prismic from '@prismicio/client'
import * as prismicNext from '@prismicio/next'
export const createClient = (config = {}) => {
const client = prismic.createClient(repositoryName, {
+ fetchOptions: {
+ cache: process.env.NODE_ENV === "production" ? "force-cache" : "no-store",
+ next: { tags: ['prismic'] },
+ },
...config,
})
+ prismicNext.enableAutoPreviews({ client })
return client
}
Set up previews
Prismic Previews in the App Router are currently experimental and only supported using dynamic rendering. All Prismic API requests are cached at request time, resulting in performance similar to static rendering.
If you prefer static rendering, remove Prismic Preview support or use the Pages Router.
Add <PrismicPreview> to your layout
Prismic Previews require the Prismic Toolbar and a framework integration to work. @prismicio/next provides all the code you need in a simple <PrismicPreview> component.
Add the component to your global layout in src/app/layout.tsx.
// src/app/layout.tsx
+ import { PrismicPreview } from "@prismicio/next";
+ import { repositoryName } from "@/prismicio";
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
+ <PrismicPreview repositoryName={repositoryName} />
</body>
</html>
);
}
Create a /preview Route Handler
A small bridge is needed between Prismic and your Next.js website to support previews. You can connect the two by creating a Route Handler, which will redirect content writers from Prismic to their previewed document’s webpage.
- Create a directory named
preview within the src/app directory.
- Within the
src/app/preview directory, create a file named route.ts and paste in the code below.
// src/app/preview/route.ts
import { NextRequest } from "next/server";
import { redirectToPreviewURL } from "@prismicio/next";
import { createClient } from "@/prismicio";
export async function GET(request: NextRequest) {
const client = createClient();
await redirectToPreviewURL({ client, request });
}
Set up previews in Prismic
You’ll need to tell Prismic your app’s URL in order to preview content.
- Go to your Prismic repository.
- Open the settings page using the gear icon in the bottom left corner.
- Select Previews in the sidebar.
- Fill out the fields with these values:
Site Name: Development
Domain: http://localhost:3000
Preview Route: /preview
- Click “Create my Preview”
Add other preview endpoints as needed, such as your production URL.
Set up On-demand Revalidation
Your app is configured to cache all Prismic queries indefinitely for the best performance. However, you’ll want to fetch new content after you publish documents in Prismic.
In this last step of this tutorial, you’ll set up On-demand Revalidation to do exactly that: Prismic will be configured to call one of your app’s endpoints to clear Next.js’ network cache upon content changes.
On-demand Revalidation won’t have an effect until you deploy your app. If you don’t plan to deploy your app, you can skip this section.
- Create a directory named
revalidate within the src/app directory.
- Within the
src/app/revalidate directory, create a file named route.ts and paste in the code below.
// src/app/revalidate/route.ts
import { revalidateTag } from 'next/cache'
import { NextResponse } from 'next/server'
export async function POST() {
revalidateTag('prismic')
return NextResponse.json({ revalidated: true, now: Date.now() })
}
Set up On-demand Revalidation in Prismic
Once your app is deployed and has a public URL, you’ll need to create a Prismic webhook pointed to the /revalidate endpoint.
- Go to your Prismic repository.
- Open the settings page using the gear icon in the bottom left corner.
- Select Webhooks in the sidebar.
- Fill out the fields with these values:
Name of the Webhook: Next.js On-Demand Revalidation
URL: Your app’s deployed URL + /revalidate (example: https://example.com/revalidate)
Triggers: Only check “A document is published” and “A document is unpublished”
- Click “Add this webhook”.
You can test everything is working by publishing an edit to a document and viewing its page on your deployed website. You should see your changes reflected practically immediately after publishing.
.