Next JS Preview using prismic-javascript with getStaticProps

Hi I have an existing Next JS project where i have integrated with Prismic using

https://prismicio.github.io/prismic-javascript/

in Next Js 9.2. it was easy to implement preview using PreviewSession and passing the request to options. However, I am running into issues upgrading project to nextjs 9.5 where getStaticProps does not have a request object.

I have reviewed this example https://github.com/vercel/next.js/blob/canary/examples/cms-prismic/lib/api.js

Similar to this example I have access to preview ref. However, I can not find out how to pass it to Prismic Client. Code similar to below:

var Prismic = require('prismic-javascript');

Prismic.api("http://your_repository_name.prismic.io/api", function(error, api) {
  var options = {}; // In Node.js, pass the request as 'req' to read the reference from the cookies
  api.query("", options, function(err, response) { // An empty query will return all the documents
    if (err) {
      console.log("Something went wrong: ", err);
    }
    console.log("Documents: ", response.documents);
  });
});

Is there any way to do this where i can pass the ref manually rather then via request object on server side. Or I have to build our own fetch functions similar to the demo.

Hello @tejas, welcome to the community forum.

There’s a specific needed configuration that you need to add to your project. We’re about to post a more detailed article for it.

I’ll share it in this thread once it’s published.

Hello again.

We’ve published the documentation for Handling document previews in NextJS.

Let us know if we can help you with anything else

1 Like

Confirming that provided solution worked and given instructions were easy to follow.

2 Likes