Gatsbyで画像のgraphQLで、developだとエラーが出ないが、本番環境だとエラーになる

Question

エラーの内容

Cannot read property 'dir' of null
 18 |       thumbnail {
     |       ^
  19 |         childImageSharp {
  20 |           gatsbyImageData(width: 1000, formats: [AUTO, WEBP, AVIF])
  21 |         }
  22 |       }

状況

npm run developだとエラーは起きず、画像が表示され意図した挙動になっています
npm run buildすると、エラーになります。

ディレクトリ構成

content/blog/first/index.md
content/blog/first/top.jpg

---
thumbnail: "./top.jpg"
---

gatsby-node.js

    type Frontmatter {
      thumbnail: File @fileByRelativePath
    }

graphql

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        thumbnail {
          childImageSharp {
            gatsbyImageData(width: 1000, formats: [AUTO, WEBP, AVIF])
          }
        }
      }
    }
  }
`

const thumbnail = getImage(data.markdownRemark.frontmatter.thumbnail)
~~~~~~~
 <GatsbyImage
              className="m-auto"
              image={thumbnail}
              alt={post.frontmatter.title}
            ></GatsbyImage>

補足

スターターはgatsby-starter-blogを使っています。
記事と記事に使う画像を同じディレクトリに保存したら楽かなと思ってこの構成にしていますが、難易度下がるなら画像の場所はどこでも良いかなと思っています。

もし思い当たる節がある方おりましたら、教えていただければと思います。どうぞよろしくお願いします。