Preview not working on netlify

Developing with Prismic
1

Hi,

I'm currently trying to make the preview work on a Next.JS website I'm building. It works perfectly when running in dev mode locally but when deployed on Netlify, I get a 404 page (the Next JS default one since I didn't do a custom one yet). When I look up the cookies they are present and seems valid.

I'm running NextJS 9, @prismicio/client 4 and deploying using the @netlify/plugin-nextjs plugin

I'm including some code in a codesandbox of the relevant parts (IMO) vibrant-oskar-32938 - CodeSandbox

I based myself on this example for my development next.js/examples/cms-prismic at canary · vercel/next.js (github.com)
I know their example is for vercel but it should work with that I read for netlify.

Am I missing something? It seems like the cookies aren't took into consideration.

If you need more details please feel free to ask

Thanks

3

Hey @fprovost,

Welcome to the Prismic Community Forum, and thanks for posting this question :slight_smile:

For starters, do you have a custom 404 page in your project? For previews to work, you must include the Preview script on every page of your website, including your 404 page. Netlify includes a default 404 page, which wouldn't have the preview script. If you don't have a custom 404 page, try adding one to your project with the script on it:

Let me know if this helps! If not, we'll try some other troubleshooting.

Sam

4

Thanks for the answer.

Saddly it doesn't work. I put the script in _document.tsx and I saw it was there in the default in the default 404 page while inspecting it. It still built a custom page just to test and it didn't worked either. In both cases the preview plugin/tool is there but I still get a 404 page instead of the content I want to see (a new document)

6

Hey @fprovost,

I've spent some time looking into this, and I understand the problem a little more, now. Vercel supports the ~/pages/api/ directory natively, and runs turns your API routes into serverless functions. Netlify doesn't have this support built in. So, rather than putting your preview.js file in the API directory, you need to put it in a Netlify function. I see you have installed Netlify's Next plugin. Have you also created a Netlify function to set your preview cookie?

Sam

8

Hi @samlittlefair ,

I found the solution last night and forgot to update the thread sorry.

The preview was working fine for existing pages but I was testing with one new. The solution I found to support the new pages was to set the fallback property for the getStaticPaths to true and manually redirecting to the 404 page in a useEffect if the page doesn't receive data

9

@fprovost That's great to hear! Thanks for the update :slight_smile:

10

Hi,

I'm trying to implement Prismic preview in a Next.js application. I'm using Server-side Rendering with getServerSideProps.

When I run the code locally, the preview works perfectly. However, when deployed into production (running over https) I just get 404 page not found.
I was following the troubleshooting steps here and

The troubleshooting suggests, that if this far it works, then the problem is in the code.

However, I'm confused since the same code works fine locally.
Is there something else I could check? Any idea would be helpful, thank you!

P.S. Unfortunately I cannot share the complete source code for confidentiality reasons.

11

Hi Satenik,

I think your issue may be related to this one. So I merged this topics.

12

Hi @Phil,
Thank you for your reply.

It seems that the issue for @fprovost was setting the fallback property for getStaticPaths. However, I don't use getStaticProps. I use getServerSideProps instead. Is there an equivalent I should check here?

Also, now I'm a bit confused about the cookies. I was checking out this Prismic Next.js example, where the preview works fine but it doesn't use io.prismic.preview cookie at all. It only has __next_preview_data, __prerender_bypass cookies. As far as I understand this two are generic next.js preview cookies while io.prismic.preview is specifically for prismic. Could you please clarify which one is needed for Next.js Prismic preview to work?

Thanks a lot!

13

Hey @satenik,

What hosting service are you using?

Are you able to share any of your code privately? If so, you could send me a ZIP file via DM. Some files that would be helpful to see are:

  • package.json
  • preview.js
  • your link resolver
  • a deploy config file, if you have one (now.json, netlify.toml, etc)
  • prismic-configuration.js
  • any utilities you use for querying
  • an affected page component where you use getServerSideProps

Or anything else you think might be helpful.

In the meantime, I'll look into your question about the preview cookies in the Next.js example project.

Sam

15

Hey @satenik,

I played around and got my own basic site deployed on Netlify. Can you try:

Make sure your package.json has these commands:

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

Add a file to the root called netlify.toml:

[build]
  command = "npm run build && npm run export"
  publish = "out"

Here's my project repo, for reference.

Let me know if that doesn't work, and we'll go from there.

Sam

16

Hi Sam,

Thanks for your reply.

Unfortunately I can't use next export, since it's for exporting the app to static HTML, while I have dynamic runtime pages using getServerSideProps.
I tried deploying a test app to Vercel, which works fine. Trying to deploy the same app to Netlify currently fails for me. But I wouldn't focus much on Netlify, since my real project uses Firebase hosting.
So I'll try to understand if it's a Firebase hosting issue or something else.
As I was mentioning, io.prismic.preview cookie is present in the page, which makes me think the /api/preview endpoint is deployed correctly.

Sorry if this is too many details, I'm just out of ideas what could cause the issue. Thanks.
Satenik

17

Hey @satenik ,

Sorry I didn't respond sooner. Have you made any progress with this issue?

Sam

18

Hi @samlittlefair,

I figured out that the issue I'm facing has something to do with the Firebase deployment using Google Cloud Build. Once I deployed the same app on Vercel, it worked fine.

My Firebase hosting configuration somehow blocks the preview API's but using the Cloud Run URL instead works fine (as a temporary solution). My colleague is researching this further and I will post an update once we find the exact issue.

Thank you for you support!

Satenik

1 Like
19

Awesome! Thanks for the update :slight_smile:

20

This issue has been closed as it has been fixed, Flag if it is not the case for you to reopen.

23

Hey, Phil. Thanks for the updated documentation - I got preview to work with the updated steps for Next. However, I noticed a slight typo on this page:

The dynamic page shows to import and call useUpdatePreviewRef, however the actual export in the file is called useUpdatePreview. Screenshots of the differences below.

image

image

24

Hey Ashley,

Thanks for pointing this out, I missed this as it was still working because it was a default export. I'll update this now.

Thanks again. :slight_smile: