Next.js - How to Loop through an Array of Images on a [Slug] File

  types: schemaTypes.concat([{
    name: 'post',
    type: 'document',
    title: 'Post',
    fields: [
      {
        title: 'Slug',
        name: 'slug',
        type: 'slug'
      },
      {
        title: 'Name',
        name: 'name',
        type: 'string'
      },
      {
        name: 'images',
        type: 'array', // supports drag'n'drop of multiple files
        options: {
          layout: 'grid'
        },
        of: [{
          type: 'image'
        }]
      }
    ],
  }])

// [slug].js

import client from '../../client'

const Post = (props) => {
  const { name = 'Missing title', slug = 'missing slug', images = 'Missing images' } = <http://props.post|props.post>
  return (
    &lt;article&gt;
      &lt;h1&gt;{name}&lt;/h1&gt;
      &lt;span&gt;By {images}&lt;/span&gt;

      {posts.categories.map((category) =&gt; (
    &lt;li key={category}&gt;
      &lt;span&gt;
        {category}
      &lt;/span&gt;
    &lt;/li&gt;
  ));
}

    &lt;/article&gt;
  )
}

export async function getStaticPaths() {
  const paths = await client.fetch(
    `*[_type == "post" &amp;&amp; defined(slug.current)][].slug.current`
  )

  return {
    paths: paths.map((slug) =&gt; ({params: {slug}})),
    fallback: true,
  }
}

export async function getStaticProps(context) {
  // It's important to default the slug so that it doesn't return "undefined"
  const { slug = "" } = context.params
  const post = await client.fetch(`
    *[_type == "post" &amp;&amp; slug.current == $slug][0]{name, "images": author-&gt;name}
  `, { slug })
  return {
    props: {
      post
    }
  }
}

export default Post

*[_type == "post" && slug.current == $slug][0]{
  name,
  images[]->,
}

export async function getStaticProps(context) {
  // It's important to default the slug so that it doesn't return "undefined"
  const { slug = "" } = context.params
  const post = await client.fetch(`
    *[_type == "post" && slug.current == $slug][0]{
      name,
      tester,
      images[]->,
    }
  `, { slug })
  return {
    props: {
      post
    }
  }
}

const Post = (props) => {
  const { name = 'Missing title', tester = 'missing test....', images = 'Missing images' } = <http://props.post|props.post>
  return (
    &lt;article&gt;
      &lt;h1&gt;{name}&lt;/h1&gt;
      &lt;span&gt;By {images}&lt;/span&gt;
      &lt;span&gt;{tester}&lt;/span&gt;
    &lt;/article&gt;
  )
}