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 (
    <article>
      <h1>{name}</h1>
      <span>By {images}</span>

      {posts.categories.map((category) => (
    <li key={category}>
      <span>
        {category}
      </span>
    </li>
  ));
}

    </article>
  )
}

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

  return {
    paths: paths.map((slug) => ({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" && slug.current == $slug][0]{name, "images": author->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 (
    <article>
      <h1>{name}</h1>
      <span>By {images}</span>
      <span>{tester}</span>
    </article>
  )
}