See Sanity in action 👀 Join us for a live product demo + Q&A →

Customizing an image field in a Next.js app with live preview mode

7 replies
Last updated: Feb 27, 2023
Hi folks. I've posted about this before but I wanted to start fresh, since I've made some progress and my previous thread was getting pretty messy.
I'm customizing an
field via a custom form component . In my Next.js app, most of the changes to my Sanity draft documents are being live-streamed via next-sanity 's live preview mode, except for the
field. I'm patching this field whenever the value of the
field changes (see below). I haven't been able to determine why the updated/patched value isn't immediately streamed, like my other field values are.
It's worth noting that, when I refresh the Next.js page, the new updated/patched values do appear (without having saved the document in Sanity studio). So, the draft document values are reaching my Next.js app, they just aren't being immediately injected into the page like the other field values are.

const ImageWithColorSwatches = props => {
  const { value, renderDefault, onChange } = props;
  const image = useFormValue(["image"])?.asset?._ref;

  const colors = usePageColors({
    swatchName: value?.colorPalette ?? "vibrant",

  // When colors change, patch the document
  // (these changes aren't streaming to Next.js via `next-sanity` live preview)

  useEffect(() => {
    if (colors && value && colorsAreDifferent(colors, value.pageColors)) {
      const nextValue = { ...value, pageColors: colors };
      onChange(nextValue ? set(nextValue) : unset());
  }, [colors, onChange, value]);

  return (
      {colors ? (
          <ColorSwatch color={colors.primary} />
          <ColorSwatch color={colors.secondary} />
      ) : null}

export default defineConfig({
  form: {
    components: {
      input: props =>
        ["Main image"].includes(props.schemaType?.title) ? (
          <ImageWithColorSwatches {...props} />
        ) : (
fields are children of the
field (i.e. sub-fields within its
Feb 24, 2023, 2:45 AM
How are you using the field in your frontend? And are you checking that the value is actually set on change via inspect in Sanity?
Feb 24, 2023, 7:24 AM
I would also really start inspecting the whole data you get from time to time in Next.js. If the data is present and matches what you’re expecting, then it’s probably more on how hooks were setup, etc.
Feb 24, 2023, 12:39 PM
user A
the values are updating. I can see them change in the JSON, via the Sanity inspect tool.
Feb 27, 2023, 10:37 PM
I'm using this "custom auth token" workflow, for what it's worth:
Feb 27, 2023, 10:52 PM
I think the live preview data may actually be streaming correctly after all. In my app, I generate CSS variables from the Sanity document's colour data and apply them to the page as follows. It looks like my
string is changing but the
block isn't being updated. I'll investigate how Next's Styled JSX works. Maybe the old value is being cached.
I found this "
Styled JSX does not hot reload " issue but it's quite outdated. I guess this is officially a Next.js problem and not a Sanity problem, so I'll stop posting about it here. Thanks everyone!
return (
    {pageStyles ? <style jsx global>{pageStyles}</style> : null}
    {/* ...etc... */}
Feb 27, 2023, 11:12 PM
user M
☝️ Looks like this was a Next.js issue and not a Sanity issue. I wouldn't normally
mention you but I thought you'd be interested since you spent quite a bit of time helping me debug this. Thanks again for all of your help and please ignore my previous threads related to this topic.
Feb 27, 2023, 11:34 PM
Thanks so much for the update! I was really scratching my head on this one!
Feb 27, 2023, 11:37 PM – 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.

Categorized in