# Preview with the Next.js App Router SDK

> How the Next.js App Router SDK connects Canvas preview and visual editing to your app.

Source: https://docs.uniform.app/docs/sdk/nextjs-app-router/preview

> **Developer Preview:**
>
> This page documents the developer preview of the SDK, version `20.81.1-alpha.25.sha-f076f9b857`.

The preview handler (`GET /api/preview`) connects Canvas to your app:

1. Canvas opens `/api/preview?secret=…&path=…` in the preview panel.
2. The handler checks the secret against `UNIFORM_PREVIEW_SECRET`, and enables Next.js draft mode.
3. The handler redirects to the page with a 307 redirect.
4. The middleware sees draft mode, and writes the draft state into the code. When the URL has `is_incontext_editing_mode`, it writes the editor state.
5. The page renders draft content and adds the visual editing script. In the editor state, it also adds the editing markers.

Draft requests do not use edge mode. The browser chooses the personalization and test variants.

## Change the preview path

By default, the handler redirects to the `path` of the project map node. If the composition has no node, it uses the `slug`. Use `resolveFullPath` when your URLs are different from the project map paths:

`app/api/preview/route.ts`

```ts
export const GET = createPreviewGETRouteHandler({
  // Canvas sends the project map path (/en-US/…); the site uses /en/…
  resolveFullPath: ({ path, slug, id, locale }) => (path ?? slug)?.replace(/^\/en-US(\/|$)/, "/en$1"),
});
```

The handler does not add the `locale` to the redirect URL of a composition. If your route uses the locale, put it into the path in `resolveFullPath`.

## Pattern previews

When Canvas shows a pattern, the handler redirects to `playgroundPath` with the `id` of the pattern. The middleware then rewrites the request to `${playgroundPath}/[code]`.

> **Warning:**
>
> The middleware finds a pattern preview only when the path is the same as `playgroundPath`. If `processPlaygroundPath` of the preview handler changes the path, for example to add a locale, the middleware does not find the pattern preview. Then the preview gives a 404.

## Turn off draft mode

Open `/api/preview?disable=true&path=/about` to turn off draft mode and go to `/about`.