Can't create custom Image Node for Next.js about markdoc HOT 6 CLOSED

// markdoc/nodes/image.markdoc.ts

import { Image } from '../../src/components/blog/Image'
import { Tag } from '@markdoc/markdoc'

export const image = {
  render: Image,
  attributes: {
    src: { type: String },
    alt: { type: String }
  },
  transform(node: any, config: any) {
    const attributes = node.transformAttributes(config)
    const children = node.transformChildren(config)
    // @ts-ignore
    return new Tag(this.render, { ...attributes }, children)
  },
}

// src/components/blog/Image.tsx

export function Image({
  src,
  alt
}: {
  src: string
  alt: string
}) {
  return (
      <div
      >
        <NextImage
          src={src}
          alt={alt}
          width="100px"
          height="100px"
        />
      </div>
  )
}

import { Tag } from '@markdoc/markdoc'

export const paragraph = {
  transform: (node: any, config: any) => {
    const attributes = node.transformAttributes(config)
    const children = node.transformChildren(config)

    // hack to make rendering block tags work correctly. They shouldn't be wrapped in a p tag.
    if (children.length === 1 && children[0] instanceof Tag) {
      return children
    }

    return new Tag('p', attributes, children)
  },
}