Next.js Previews Not Working on Staging/Production

Developing with Prismic
1

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}>
  ...