First of all, thank you for providing all this information it really helps when digging into this stuff.
So I wasn't able to replicate this on my end, and there's nothing in what you've told me that seems out of place, so there are a few things that would help me continue to investigate.
Can you tell me which browser you or the users are working with?
Can you provide me with a copy of your project so I can test it further on my end? You can send this in a private message to me, that way, it will stay private.
Thanks for the reply. I normally use Chrome107 v but was also facing similar (but slightly different) problems with Firefox v106.
My suspicion lies in how the browsers are handling cookies. I noticed that Firefox has stricter default cookie controls than Chrome. The looping wasn't happening but preview data wasn't loading at all. Once I disabled the strict controls, then the looping started again.
From the firefox preferences panel:
Balanced for protection and performance. Pages will load normally.
Firefox blocks the following:
Social media trackers
Cross-site cookies in all windows
Tracking content in Private Windows
Cryptominers
Fingerprinters
I will DM you a recording of what's going on with us. Getting you a copy of our project is a bit more tricky. I'd have to get approval and probably would have to make a minimal example, rather than our actual code. That will take a few days so I would appreciate your patience.
Edit: @Phil I tried sending you a private message but I got an error saying that you aren't accepting messages at this time.
Hmm, I also can't send a message to that group. For both your convenience and mine, here's the link to the screen recording. I'll probably edit this message after a few hours or so
So reached out to the devs on my team for help on this, and they got back to me with some info.
They figured out the issue in the reproduction project you sent me but can’t say for sure if it solves the issue in your actual project. If you're experiencing this issue on your production site with a working homepage, then this is probably not the solution.
TL;DR: Update to the latest version of @prismicio/next.
Since you are on Next 12, you can use v0.1.9 rather than v1.0.2.
npm install @prismicio/next@^0.1.9
Full explanation <PrismicPreview> calls /api/preview in the background which will always redirect to / when called during a share link preview session. /api/preview only redirects to the correct preview page when coming from the Writing Room because that URL contains the documentId and token URL parameters. Share links do not contain those.
Redirecting to / is not an issue normally, except that this project doesn’t have a homepage. Instead, it shows a Not Found page with a 404 status code. <PrismicPreview> was checking for a status code in the 200-299 range (via Response.ok) before refreshing the page. Although /api/preview was correctly updating Next.js’s cookie-based preview data, <PrismicPreview> saw it as a failed request. This is why you don’t see the preview content until you manually refresh the page again.
In the updated @prismicio/next, <PrismicPreview> checks if the request redirected (via Response.redirected). If it was redirected, even if it directs to a 404 page, the previewed page will refresh, now with the correct Next.js preview data.
The page will refresh twice before showing correct preview data when using a share link:
First refresh: Prismic Toolbar needs to update the Prismic preview cookie with the updated preview data. Once it does that, it refreshes the page.
Second refresh: <PrismicPreview> sees the updated cookie and calls the /api/preview endpoint to update Next.js’s cookie. It then refreshes the page to fetch the page’s content, now containing the previewed content.
Apologies for the extended delay, Phil. Thanks so much for the detailed explanation and thanks to the team for diving in. We've had to reprioritize for now so this has been shelved. If my team determines it makes sense to come back to this, I know exactly where to pick up.
Hi @Phil and @Prismic-Support-Team I currently have a site built with Next and Prismic deployed through Netlify and I am experiencing similar issues with the shareable preview link not working. Here are the steps for reproducing.
Save draft in current document
Open the preview using the preview button
Initial preview will load fine, when preview toolbar appears, click "Get a shareable link"
Open separate browser window with cleared cookies and storage and load link
The preview version of the site is not displayed. Only the currently live site with the preview toolbar.
I can send any additional resources you need to help debug the issue. But for now here are all of the dependencies and versions I am currently using.
When you say it's "not working anymore," do you mean that no link is generated or that when you or your client visit the link, no preview happens?
I am going to check one of my projects now.
UPDATE
I just tested a preview link on a project of mine. It worked. I tested the link using a guest window in Chrome. If I do the same in Firefox, no dice. If I send the link to someone who tries to view it on their mobile, the preview toolbar does not come up for them either.
I just noticed the same thing. Plus I'm getting really strange behavior out of my Vercel builds. So to talk about what I just did re: previews.
I tried production preview in Page Builder. Page loads but no preview toolbar. Close preview tab. Went to page builder and then to legacy editor. Preview in production. Again no preview toolbar. Fire up the dev environment and legacy editor. Preview in development. Yes preview toolbar. Ok back to production preview from legacy editor. Yes I get tool bar. Try again from page builder... yes preview toolbar appears again.
Now if I just figure out why my /blog and /projects paths 404 when building in Vercel but don't when building on Netlify (just a sanity check...thanks netlify).
I described above? Any luck?