Preview doesn't show edits

Developing with Prismic
1

I'm setting up Prismic on my project for the first time and I followed the new documentation on how to preview.

I see the toolbar when I click to preview it on my local environment but it doesn't show edits.

Would anyone know what might be going wrong? My code seems to match the documentation.

3

Hello @dhayes

Thanks for reaching out to us.

Could you please paste all your preview setup files here or send me a zip file?

Thanks,
Priyanka

4

There's one part that was on me. The preview endpoint in the Prismic dashboard wasn't set up correctly for NextJS. I fixed that to point to /api/preivew--so it wasn't sending the token in the first place.

However, now that it's hitting the preview endpoint it breaks completely:

Screen Shot 2022-03-10 at 1.03.25 PM
Screen Shot 2022-03-10 at 1.03.25 PM1920×876 69.7 KB

Also, I can suppress the error but the preview API file also gives an error in the IDE.

Screen Shot 2022-03-10 at 1.14.26 PM
Screen Shot 2022-03-10 at 1.14.26 PM879×321 43.6 KB

5

Ok, I figured out why it isn't working and it seems to be fixed now. I'll describe the fix so others can hopefully get past this if they're starting fresh.

Basically, there are some errors in the Next.js "setup" documentation when it comes to the prismicio.js file.

On the setup page (Set up Prismic with Next.js - Prismic) the documentation asks you to create the file and create the following createClient() function:

// This factory function allows smooth preview setup
export function createClient(config) {
  const client = prismic.createClient(endpoint, {
    ...config,
  })

  enableAutoPreviews({
    client,
    context: config.context,
    req: config.req,
  })

  return client
}

The problem it's missing "previewData" in the "enableAutoPreviews" section (it's also missing some optional chain operators which caused a different bug for me when setting up dynamic pages). The correct version is:

export function createClient(config) {
    const client = prismic.createClient(endpoint, {
        ...config,
    })

    enableAutoPreviews({
        client,
        previewData: config?.previewData,
        context: config?.context,
        req: config?.req,
    })

    return client
}

Once I fixed this the previews started working.

(Also for the issue of the "export default async (req, res)" IDE error I just went ahead and gave it the name "preview" so it would stop complaining.

6

Hello @dhayes

I am glad that the issue has been solved. Thank you so much for sharing feedback and working code snippets. I'll share with the team and make the necessary changes.

Thanks,
Priyanka