Preview feature not working in Production on drafts (NextJs)

[jeroen (Jeroen van der Zande)]

Hello,

I'm having some problems implementing previews on unpublished documents in production. In development it works as expected no issues what so ever.

my preview code is the same as in the documentation:

const Preview = async (req, res) => {
const { token: ref, documentId } = req.query;

const redirectUrl = await Client(req)
    .getPreviewResolver(ref, documentId)
    .resolve(linkResolver, "/");

if (!redirectUrl) {
    return res.status(401).json({ message: "Invalid token" });
}

res.setPreviewData({ ref });
res.writeHead(302, { Location: `${redirectUrl}` });
res.end();

};

export default Preview;

and the code for slugs I am trying to preview is:

export async function getStaticProps({
params = {},
preview = null,
previewData = {},
}) {
const { uid } = params;
const { ref } = previewData;
const client = Client();

const page = await client.getByUID("project", uid, {
    ref: ref ? ref : null,
});


return {
    props: {
        preview,
        page,
    },
};

}

I have tried implementations from the examples and nothing seems to be working. Are previews on drafts in production supported? When I log the document in the link resolver I get the draft as expected, if I log the ref in the preview component it logs the correct redirect url and the correct ref. but in the logs of the getStaticProps function, the preview remains on null as well as the previewData.

"next": "9.5.2",
"prismic-javascript": "^3.0.2",

Thanks for your help

[Fares]

Hi Jeroen,

Welcome to the Prismic community.

When using getStaticProps to build your website statically with Next.js you need to be sure to use the getStaticPaths and the returned fallback field set to true.

In this way, you ask your next app to fetch the draft unpublished documents that has paths that have not been generated at build time as shown in this code snippet.

export async function getStaticPaths() {
  const documents = await queryRepeatableDocuments(
    (doc) => doc.type === 'page'
  );
  return {
    paths: documents.map((doc) => {
      return { params: { uid: doc.uid }, locale: doc.lang };
    }),
    fallback: false,
  };
}

Also, note that when you have the fallback field set to false then your Next.js app will return a 404 page

Please check this article to learn more about getStaticPaths

Please let us know if that doesn't solve the issue for you.
Fares

[jeroen (Jeroen van der Zande)]

hey @Fares,

Thank you for writing back to me,

my getStaticPaths() function is as follows

export async function getStaticPaths() {
const pages = await Client().query(
    Prismic.Predicates.at("document.type", "project")
);

return {
    paths: pages.results.map((doc) => {
        
            return { params: { uid: doc.uid } };
    }),

    fallback: true,
};

}

I don't get a 404 page, I just get an error message, I will attache the screenshot for your consideration.

Also everything works great in dev mode, just not in the build version for some reason, and only on drafts.

thanks in advance for your help

[jeroen (Jeroen van der Zande)]

@Fares thanks for your help, I got it working.

[Fares]

Awesome, can you tell us what was the issue, this can be really helpful in the case if somebody from the community face the same issue?

[jeroen (Jeroen van der Zande)]

To be honest it was a really stupid mistake, I tried the preview feature in production and it did not work, So I started to troubleshoot the issue. I used the next build command in development to log and trace where it was going wrong, and not touch the production environment. I traced it back to the getStaticPaths function and set the fallback to true. Now this resolved the error in production but not in the local build.

I should have deployed and tried again in production before contacting you guys, In reality the article on getStaticsPaths (which you mentioned) solved it because it mentioned it wont work on nextjs builds. Thanks again @Fares

[Fares]

Thanks for the explanation, and please don't hesitate to reach to us in case you have any other questions.