How to Implement Preview Content with Next-Sanity

1 replies
Last updated: Jul 15, 2021
Hey folks, I'm having a rough go getting preview content to play nice in
next-sanity
. the production build is showing unpublished changes as I make them. Here's the page's code:
import Error from "next/error"
import { useRouter } from "next/router"
import { Container, Heading } from "@chakra-ui/react"
import Layout from "@components/Layout"
import { PortableText, usePreviewSubscription } from "@lib/sanity/sanity"
import { getClient } from "@lib/sanity/sanity.server"
import { groq } from "next-sanity"
import { NextSeo } from "next-seo"

const Home = ({ data, preview }) => {
  const router = useRouter()

  const { data: page } = usePreviewSubscription(testPageQuery, {
    initialData: data,
    enabled: preview || router.query.preview !== null,
  })

  if (!router.isFallback && !data) {
    return <Error statusCode={404} />
  }

  const { title, body } = page

  return (
    <Layout>
      <NextSeo title={title} />
      <Container maxW="container.lg" px={5}>
        <Heading>{title}</Heading>
        <PortableText blocks={body} />
      </Container>
    </Layout>
  )
}

const testPageQuery = groq`
*[_type=="testPage"][0]
`

export const getStaticProps = async ({ params = {}, preview = false }) => {
  const data = await getClient(preview).fetch(testPageQuery)

  return { props: { data, preview } }
}

export default Home
I can't see what I'm doing wrong
πŸ˜…
Jul 15, 2021, 6:23 PM
Never mind! It's working as intended. There's just a sanitySession cookie that gets stored, so I was able to view the changes live. Works as intended in incognito tab, or if you delete that cookie. May be worth making note of that in the
next-sanity
REAME somewhere πŸ‘€
Jul 15, 2021, 6:41 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.