Prismic Preview feature doesn't work on Prod site

Developing with Prismic
1

Hi, Prismic Support team!

I've encountered the issue of Prsmic Preview.
It works well on my local dev but now works on a live site.

image
image1593×831 10.1 KB

Just shows a 404 error page.

I've referenced many articles include the above article but have not found the solution yet.

Please solve my problem.
Thanks

3

Hi Yuri,

I'll be happy to help.

Can you show me and example of one your page files which has previews configured?

Even better if you can give me a GitHub link to your repo so I can recreate this issue on my side.

Thanks

5

Hi Yurii,

So I looked at your project and there are no Slice or content in your landing_page type documents that correspond to components in your pages which is most likely breaking your previews in production. It's hard to really know if previews are working locally in your project like this as you have page structures in your project that doesn't match the page structure of the data coming from Prismic.

I would try and have a fully working page locally before testing on Production. Let me know how this goes once you test it.

Thanks.

6

Hi, Phil
Thanks for your effort.

I've changed my project structure.
Could you check again?

7

Does it work now?

8

Hi Yurii,

No unfortunately the project still doesn't work as the data contained in Prismic is not represented on your published pages so I can't start debugging what might be wrong in your production site if I can't see the Prismic content locally. I would recommend having a fully working page with Prismic data before working on Previews. Previews are usually the last thing we work on when we build our Sample projects so that we are sure the data is parsed when delivered form the API.

Also, your page that you are testing with has the uid of test-page when you already have a file in your next.js pages structure of the name test-page, this creates a conflict in Next.js as pre-defined routes take precedence over dynamic routes. So this could be causing you prod issues as the preview cookie might be loaded on the wrong file.

Try starting with our Blog example to see how we recommend configuring your project:

Thanks.

9

You can test with index.js(landing page) uid of home, not test-page.

It working well with full working page with Prismic Data

Did you test my project on your local?

10

I tested that page as well and none of the content from Prismic is templated there, only the word Post. This is because your link resolver is directing anything from the landing_page custom type towards the the [uid].js file. You can learn about how the link resolver works here:

Preview mode uses the link resolver to find the page on which to load your content.

11

Just I've changed link Resolver.

As I told you it works well on my local but still doesn't work on the live site.

12

image
image1918×735 10.3 KB

It shows 404 page

13

So I deployed your application on Vercel and saw this warning:

warn  - Statically exporting a Next.js application via `next export` disables API routes.

This means previews are being disabled.

To fix this for now, in your package.json change...

"build": "next build && next export",

to...

"build": "next build",

Your website will still be deployed statically, it will just allow previews to work. To quote the Next.js docs link above:

Pages in your application without server-side data dependencies will be automatically statically exported by next build , including pages powered by getStaticProps

Let me know if this is clear for you.

Thanks.

14

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.