Preview with NextJS 10

[lmalmendier (Luc Malmendier)]

Hey there,

we moved our production Site from NextJS 9.5.x to NextJS 10+ and now oddly the preview stopped working. We did a lot of other changes in order to move to NextJS 10 so we are not 100% if that is the main cause of it.

So now comes the weird issue, the page shows the correct route for the preview and it redirects to the correct preview page in the application but the content is from a different page. So for example i the preview for generic_pages will always show a specific one no matter which one i preview even though the link gets resolved correctly.

For our page we needed fallback to be false so i created extra pages only for the purpose of rendering our preview pages.

Which makes it look like this

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: true,
  }
}

export const getStaticProps: GetStaticProps = async ({
  previewData = {},
}: any) => {
  const { ref } = previewData
  const client = Client()

  const pageData = await client.getSingle('generic_page', { ref })

  return {
    props: pageData,
  }
}

The preview API looks like all of them do on here

   const Preview = async (req: any, res: any) => {
      const { token: ref, documentId } = req.query
      const redirectUrl = await Client(req)
        .getPreviewResolver(ref, documentId)
        .resolve(previewLinkResolver, '/')
      
      if (!redirectUrl) {
        return res.status(401).json({ message: 'Invalid token' })
      }

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

I hope the explanation was not too confusing of what the error actually is.

Thanks in advance!

[Pau]

Hello Luc, welcome to the forum!

There's a known issue happening with Previews in a few repositories, could you share with me the URL of your repo so I can check and confirm or discard if the issue is coming from there?

Other than that, we can do a few checks in your project:

• Are previews correctly configured in your repository, I'd guess they are if the preview worked before so i'm just checking, the endpoint must be always /api/preview
• Does your project have more than one language? if so you need to always pass the lang to the query.
• Do you see any errors in the console? could you share them with me if you do?

[Pau]

[Update] In this case, switching from using Client.getSingle to Client.query and adjusting the parameters made the problem disappear.