Next JS Preview using prismic-javascript with getStaticProps

Developing with Prismic
1

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.

3

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.

5

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
6

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

1 Like