# Next JS Preview using prismic-javascript with getStaticProps

**URL:** <https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [August 8, 2020, 4:33am UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475 "2020-08-08T04:33:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tejas](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@tejas](https://community.prismic.io/u/tejas)\
**Post date:** [August 8, 2020, 4:33am UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475/1 "2020-08-08T04:33:28Z")

</div>

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

[https://prismicio.github.io/prismic-javascript/](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](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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [August 11, 2020, 5:48am UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475/3 "2020-08-11T05:48:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [August 11, 2020, 7:31pm UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475/5 "2020-08-11T19:31:29Z")

</div>

Hello again.

We’ve published the documentation for [Handling document previews in NextJS](https://prismic.io/docs/reactjs/getting-started/prismic-nextjs#18_0-handling-document-previews).

Let us know if we can help you with anything else

---

<div class="post-metadata">

**Author:** ![tejas](https://avatars.discourse-cdn.com/v4/letter/t/a698b9/32.png) [@tejas](https://community.prismic.io/u/tejas)\
**Post date:** [August 12, 2020, 3:26am UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475/6 "2020-08-12T03:26:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [September 15, 2020, 4:45pm UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475/7 "2020-09-15T16:45:28Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:29pm UTC](https://community.prismic.io/t/next-js-preview-using-prismic-javascript-with-getstaticprops/1475/8 "2021-12-09T17:29:08Z")

</div>