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.
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.
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.
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.
“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.
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.
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.
@mgilbride - what was your solution. I seem to be having the same problem as you. Opengraph previews work for my production build, but not for my custom domain. I'm getting an unexpected 307 redirect