How to convert this react-style fetch-api to next.js?

I've just realised the way I've been fetching data from my backend (Sanity) is better suited for react app than next, so I'm trying to convert what I have at the moment. For transparency, I'm trying to call the first image within an array of images (as well as the set_name, hence why I have tried to query both the overall set with its fields, and the array within the set),

This is what I originally had to extract an image from each set:

const [ galleryData, setGalleryData ] = useState(null);

useEffect(() => {
  client.fetch(
    `*[_type == 'set']{
      set_name,
      'setSelect' : set_images[0].asset->{_id,url}}`
  ).then((data) => setGalleryData(data))
  .catch(err => console.error(err))
})

This is what I have tried but I'm getting a server error:

export const getServerSideProps = async () => {
  const query = '*[_type == "set"]';
  const set = await client.fetch(query)

  const imagesQuery = '*[_type == "set"]{set_images.asset->{_id,url}}';
  const setImages = await client.fetch(imagesQuery)

  return {
    props: {set, setImages}
  }