Next.js Previews Not Working on Staging/Production

[chris.m]

SUMMARY

• Previewing content using a localhost endpoint, works flawlessly.
• Using a Vercel staging/production endpoint, produces branded 404 error page.
• Preview toolbar on staging/production shows the correct document in Prismic however

Package.json

• "next": "^12.0.7"
"react": "^17.0.2"
"@prismicio/client": "^6.6.2"
"@prismicio/next": "^0.1.3"
"@prismicio/react": "^2.4.3"

Additional Notes

• Most unexpected, but error state can be replicated locally by amending hosts file to point 127.0.0.1 to test.com.
• Working: localhost:3000/api/preview, and banana:3000/api/preview
• Not Working: test.com:3000/api/preview (shows Prismic client error: "No documents were returned" from within getStaticProps)
• Exact same code and machine environment across both
• Printing to console the params arg in getStaticProps on banana:3000 (working) in preview mode shows the correct value for the page we are previewing, i.e. { uid: [ 'test-page' ] }
• However on test.com:3000 (not working) the console shows { uid: [ 'preview', 'api' ] }

---

CODE

pages/api/preview.js

import { createPrismicClient, linkResolver } from 'prismicio';
import { setPreviewData, redirectToPreviewURL } from '@prismicio/next';

export default async (req, res) => {
  const client = createPrismicClient({ req });
  setPreviewData({ req, res });
  await redirectToPreviewURL({ req, res, client, linkResolver });
}

pages/api/exit-preview.js

import { exitPreview } from '@prismicio/next';

export default async function exit(req, res) {
  exitPreview({ res, req });
}

pages/[uid].js

export async function getStaticProps({ params, previewData }) {
  const CMS = createPrismicClient({ previewData });
  const doc = await CMS.getByUID('page', params.uid);
  return {
    props: {
      doc
    }
  };
};

pages/_app.js

  ...
  <PrismicProvider linkResolver={linkResolver}
    internalLinkComponent={({ href, ...props }) => (
      <NextLink href={href} {...props}><a>{props.children}</a></NextLink>
    )}
  >
    <PrismicPreview repositoryName={repositoryName}>
  ...

[Fares]

Hi @chris.m,

Thanks for reaching out.

I will try to investigate this to start I will need some extra info from you:

• Have you configured the previews for staging/production in Prismic? you can learn more here
• How are you deploying your application with Next.js SSR or SSG?

Looking forward to your reply,
Fares

[chris.m]

Hi Fares,

Thanks for your reply.

• Yes, we have configured the previews in Prismic.
• Our app uses getStaticPaths/Props and is deployed as SSG.
• Tried again just now, previewing locally works successfully.
• Previewing on Vercel staging link, with the same app code, does not (branded 404 page, content not found).

Please find a few screenshots below.

Thanks again for your help.

Chris

Screenshots

Working (localhost:3000)

Not Working (vercel.app)

Preview Config

Test Document

[Fares]

Hi @chris.m
Did you try to preview a document on production without using the sharable link does it work? in fact, anonymous share links work with Next.js when set up with @prismicio/next .

[chris.m]

Hi @Fares,

Thanks for the reply.

We are experiencing this issue when we click the Preview button within the document edit screen. I have just tried the shareable link from the preview toolbar and it produces the same result.

UPDATE - Further discovery...

• I can narrow the issue to Prismic documents NOT published at the time of previewing.
• If the document has been published, thus available publicly, editing the document further and clicking the save button (document now orange), followed by the preview button, this will indeed render the page in preview mode with the proposed content change(s).
• However, if a new document is created (not yet published), or if a published document is unpublished (site then rebuilt on the server without this page), content then changed, save button then clicked (document now orange), preview button then clicked -> this leads to the 404 page.

The above behaviour is only present on our Vercel staging/production environment. Locally however (localhost:3000), preview mode always works whether it's an already published document, or if it's a completely new not yet published document.

Hope that helps.

Chris

[chris.m]

Hi @Fares,

Any thoughts on this issue? We're still unable to preview new not-yet-published documents.

Thanks again for your assistance.

Chris

[Fares]

Hi @chris.m
I have checked with my team, and they have confirmed if the preview is working entirely on your local host, then the problem must be a configuration on vercel side; you can check if on Vercel you haven't blocked the preview endpoint

[Fares]

[quote="Fares, post:16, topic:10680, full:true"]

Hi @marketing10
In fact, this issue is not the same, and in your case, you can't see your Slices in Prismic, and for that, I will split this Post and create a new issue with it.