Preview in NextJS on Vercel issue

Developing with Prismic
1

I have implemented preview in my nextjs project which is hosted by Vercel. Albeit locally it appears to be working, on Vercel i see that the Preview api endpoint is called twice for each page render. The first time, the page gets correctly rendered, but the second time the Preview endpoint receives an Unexpected status code [404] from Prismic server which in turn renders the page with an Internal Server Error.

I noticed a few stange things:

  1. the first time Preview is called the parameters are url encoded like this:
    [GET] /api/preview?token=https%3A%2F%2F....
    The second time however they are not encoded:
    [GET] /api/preview?token=https://...

  2. Despite Preview being executed for the same page, the ref it gets from the query is slightly different - in particular part2 as per below. I'm not sure if it's a good idea to post the refs for security reasons - as such I'm just giving you the syntax:
    https://.prismic.io/previews/:<part2?websitePreviewId=
    In the first call, Prismic returns data. in the second case it returns the aforementioned unexpected status code with some stack log:
    at /var/task/node_modules/@prismicio/client/cjs/@prismicio/client.js:1005:25 at processTicksAndRejections (internal/process/task_queues.js:95:5) { status: 404

Has anyone seen this issue? Any idea how to troubleshoot this?

4

Hi Peter,

I've been working recently to improve the documentation for implementing previews with Next.js and have noticed some strange warnings and errors with the latest versions of Next.js. Although I haven't seen the error you've mentioned here.

Can you share with me a screenshot of this issue when you see it? (There's no security issues with sharing preview refs)

Are you seeing this issue on pages that haven't been published before? What's the exact time you see this?

Do you have your project hosted anywhere so I can take a closer look at your implementation?

Thanks.

5

Here is a screenshot from Vercel's preview function log. the log is produced by the code below and in this particular case on a page that has been published. You see the timestamps re timing. All I did was just to open preview once.:

image
image1878×493 50.8 KB 

import { Client, linkResolver } from "../../prismic-configuration"

const Preview = async (req, res) => {
  const { token: ref, documentId } = req.query;
  console.log('preview1', ref, documentId)
  const redirectUrl = await Client(req)
    .getPreviewResolver(ref, documentId)
    .resolve(linkResolver, '/');

  if (!redirectUrl) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  res.setPreviewData({ ref });
  console.log('preview2', redirectUrl)
  res.write(
    `<!DOCTYPE html><html><head><meta http-equiv="Refresh" content="0; url=${redirectUrl}" />
    <script>window.location.href = '${redirectUrl}'</script>
    </head>`
  );
  res.end();
};

export default Preview;

There is no difference in outcome if a page got published or not.

6

What does your build script in your package.json look like?

7

"build": "next build",

8

Thanks. Are you seeing this error locally or only in production?

10

Also, are you only seeing this error for unpublished article drafts?

11

only in Vercel in production. As i said, i see the same error for published and unpublished blogs.

12

Can you give me a copy of your project so I can investigate further?

13

This thread has been closed due to inactivity. Flag to reopen.