Prismic Preview URL needs to login first to Vercel

Developing with Prismic
1

Hi, I've just discovered that the behavior of the Prismic shareable link has changed. Now, when someone accesses the shareable preview link, they need to log in to Vercel first—our hosting provider. This wasn't the case before.

I'm using NextJS 15 with the page router.

2

Hi @n.belandres,

I'll be happy to check this out :slight_smile:

I appreciate you sending this recording, can you record your issue with this Chrome plugin? It will give us the dev information needed to debug, and you can remove it once you’re done.

Thanks.

3

Hello @Phil

Here's the recording: Jam

I also raised this behavior in the Vercel community. They explained that since the preview URL uses "Draft Mode," Vercel authentication is now required. However, this wasn't the case previously—when sharing the preview link, users could see the preview page immediately without logging into Vercel.

5

Hi @Phil , were you able to check it? THanks

6

Hi Nash,

Sorry about the delay, I was out ill.

I believe there have been some changes with Next 15 and Vercel regarding draftMode(). Our team is aware of this and is working on supporting it.

You can follow this thread for updates on when it should be rolled out:

Thanks.

8

Hi @Phil , i think the fix they are mentioning in the linked article was already integrated (See screenshot below). I am using the latest version of prismic-next but still having the issue. This has been a critical issue for us as we need to share preview links to external parties that need to review things and does not have vercel account

image
image878×244 10.6 KB

9

Can you provide a zip or Github link to your project so I can test it on my side?

10

Unfortunately, i cannot share the codebase of the project because it is a company project but i can share you the a preview link if that works

11

Hi @Phil , here's a preview link you can test

12

Hi @n.belandres,

Thank you for the link!

So this is happening because your preview URL contains ?__vercel_draft=1. This URL parameter activates Vercel's draft feature, allowing run-time dynamic rendering (i.e. not build-time static rendering). The Vercel docs mention its use here: Draft Mode.

For reference, this is the previewed URL from your Jam recording:

https://www.arcanys.com/insights/details/why-you-need-a-software-architect-on-your-team?__vercel_draft=1

We tested a Prismic preview share link in an incognito window using one of our test sites, and it worked without a Vercel login. It's possible your share link was created while a Vercel draft was active.

For reference, preview share links that point to the production website should not require a Vercel account. Preview share links that point to a Vercel preview deployment will require a Vercel account or a Vercel configuration that makes preview deployments public.

I hope that helps :slight_smile:

13

Hi @Ezekiel , thank you for taking the time to check this out.

The strange thing is, there were no changes in our process for getting the preview link. It was working fine before (which I think still uses the param ?__vercel_draft=1). It's only after our recent NextJS update that it started requiring authentication.

This search param automatically appends to the URL whenever we click the Preview button in the page builder. I believe this is how the unpublished data gets queried, and basically how the preview works, right?

I can share more recordings if needed. Please let me know the best way to send them privately.

Here's the code we have in /api/preview.ts. We're currently using NextJS with the pages directory.

import { NextApiRequest, NextApiResponse } from 'next';
import { setPreviewData, redirectToPreviewURL } from '@prismicio/next';

import { createClient } from '@/prismicio';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const client = createClient({ req });

  await setPreviewData({ req, res });

  // eslint-disable-next-line @typescript-eslint/return-await
  return await redirectToPreviewURL({ req, res, client });
}
15

Hi @n.belandres,

We're not sure we've seen this behavior before - usually that URL parameter should only appear when added in or with the Vercel toolbar.

Would you be able to record a Jam with the following steps:

  1. Open a document in the Prismic Page Builder.
  2. Make an edit and save.
  3. Preview the document.
  4. Show that the URL automatically appended ?__vercel_draft=1.

If there's any information best kept private there, you can send me a private message on the forum and it won't be shared anywhere else. Thank you! :slight_smile:

16

Hello @ezekiel,
I think you're right - the __vercel_draft=1 was automatically appended because I had the Vercel toolbar enabled. After logging out of Vercel in the same browser, the search parameter is no longer automatically appended to the URL. Will keep on testing it out

1 Like
17

Awesome! Thanks for letting us know. If you spot or need assistance with anything else, don't hesitate :slight_smile: