Use Preview for non-page documents such as navbar, globarSettings in _app.js

[kris (Kristiyan Bogdanov)]

Hello,

I've been trying to set up Preview for my global state such as Navbar, Footer, etc which I currently query in _app.js in my Next.js website, but I can't figure out how to do it.

I saw this post Preview not updating index views and single use items (like nav) but it wasn't particularly helpful.

Is this possible at the moment?

Regards,
Kris

[Pau]

Hello @kris, what has worked for me is creating the queries on the same page where I'm using the data. That way, I can use the previewData ref from the props of getStaticProps and pass it to the queries.

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

  const post = await Client().getByUID("post", params.uid, ref ? { ref } : null) || {}
  const footer = await Client().getSingle('footer', ref ? { ref } : null) || {}
  return {
    props: {
      preview,
      footer,
      post
    }
  }
}

If you don't want to have all the queries on the same page, you can create a helper function elsewhere, like in the /utils folder, and then you just pass the ref to those queries. That way the page template isn't cluttered,