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


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?


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: {

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,

This thread has been closed due to inactivity. Flag to reopen.