Previewing unpublished pages w/ Next JS

Developing with Prismic
1

Hi,

I'm unable to preview unpublished pages in a Next JS project that uses the app router and I'm looking for some help.

Some preview functionality is working

  • :heavy_check_mark: Previewing changes to published pages on localhost works
  • :heavy_check_mark: Previewing unpublished pages on `localhost works
  • :heavy_check_mark: Previewing changes to published pages in production (Vercel) works
  • :x: Previewing unpublished pages in production does not work. Instead, I get a 404 page with the Preview Toolbar (as an attempt to get this working I added the <PrismicPreview /> component on a custom not-found.js page).

Here are my packages:

"@prismicio/client": "^7.3.1",
"@prismicio/next": "^1.5.0",
"@prismicio/react": "^2.7.3",
"next": "14.1.0",

My /api/preview/route.js file matches the snippet that includes draftMode here @prismicio/next Technical Reference - Documentation - Prismic

import { draftMode } from "next/headers";
import { redirectToPreviewURL } from "@prismicio/next";
import { createClient } from "@/prismicio";

export async function GET(request) {
  const client = createClient();

  draftMode().enable();

  await redirectToPreviewURL({ client, request });
}

I don't have a minimal app I can share to reproduce the issue (let me know if that is needed here). Otherwise, is there additional documentation, steps recommended to troubleshoot? I did cruise a lot of seemingly related posts with no luck. Thank you!

UPDATE / POTENTIALLY SOLVED

I believe this is solved. My app/[uid]/page.js route had export const dynamicParams = false; I've removed this and I can now preview unpublished pages in production. Fwiw, I believe this dynamicParams = false const came from generated code in Slice Machine when you click on Page snippet but I'm not certain.

3

Hi Jason,

Welcome to the community :slight_smile:

I'm glad you were able to get this working. I see from a fix that @angeloashmore made to our sample projects that removing draftmode might get the unpublished previews working again.

I've updated the docs to reflect this.

5

Thanks @Phil. To clarify, we are not supposed to include draftMode.enable() in our `` /api/preview/route.js ``` to preview pre-rendered pages that have not been published?

7

Correct, there's no need to use this mode.

Thanks.