Previews do not work with a built NextJS app

Previews work when running next dev, but a dev server is really meant to be run locally. It’s quite slow since it is also supporting hot reloading etc.

Previews do not work when running next build and then next start. This would be the ideal scenario for a staging deployment that a content manager would use for previews.

The issue can be reproduced with the official repo here: https://github.com/prismicio/nextjs-website

Are previews supported when running a production build?

Hello Matt!

You can have various Preview routes for your project.

Have you configured Previews to work in these other environments? You can do this by going to your repository settings/previews and adding this new routes.

Hi Paulina,

Both next dev and next start run by default on port 3000, so I have previews set up in my test prismic repo to point at localhost:3000/api/preview.

next dev starts a developments server, while next build creates an optimized production bundle that can then be served locally via next start. What I am saying is that previews are working when running the development server, but not when serving the production build.

With the production build, I see the preview route getting responded to with a 307 redirect, but the new content is not displayed.

For what it’s worth, I have tracked this down to the following:

I can see when running on a production build, the API route sets the cookies, but they are not set in the subsequent request for the actual pages. Thus, the preview and previewData values are not set in getStaticProps.

Update again:

It seems when running next start by default, the cookies set by next have the SameSite=None attribute. If I set NODE_ENV=development, we get SameSite=Lax, and the cookie is forwarded on, and previews work on a build.

I can’t find clear documentation regarding this behavior or it’s intention in the Next documentation…so any clarity you could provide would be awesome.

Here I am yet again : - )

“Cookies with SameSite=None must also specify Secure , meaning they require a secure context.”

I assume the issue here is Secure. You should really serve a built app (even for a staging/QA site) over HTTPS. When running locally, setting the NODE_ENV to development tells Next it can serve the cookie in an insecure context.

And one more thing…

In order for this to work you need to use the revalidate property on getStaticProps as well as fallback on getStaticPaths. I would update the example and documentation to reflect this.

Hey Matt, thank you for sharing this with us.

What is your current status on this issue?

Have you followed the Prismic guide to enabling Previews when using Next?

In there we detail how to use the preview data inside getStaticProps.

Hi Paulina, sorry for such a long delay.

I followed that document exactly. Think work when fine on a development server, but a development server is very slow. What I mentioned in my previous posts (about how the cookie is served by next, as well as how to trigger Incremental Static Regeneration https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration

I’m not sure exactly how, but I would suggest a slight tweak to the documentation to mention the way ISG works in Next, since users will need that to preview new documents.

hey Matt, how are you?
Are you still having issues with your project? inform us if you do.

Which tweak about ISG were you going to suggest? We're always interested in feedback!

This issue has been closed due to inactivity.