I'm using the following code to get images from Cloudinary and display in a simple gallery built using Next.js.

import React, { Component } from 'react'
import { CloudinaryContext, Image, Transformation } from 'cloudinary-react'
import axios from 'axios'
import Default from '@components/layouts/default'
import styles from '@styles/modules/gallery.module.css'

class Gallery extends Component {

  state = { images: [] };

  getImages() {
    axios.get('http://res.cloudinary.com/delpknfnx/image/list/something.json')
          .then(res => {
            console.log(res.data.resources);
            this.setState({ images: res.data.resources});
    });
  }

  componentDidMount() {
    this.getImages()
  }

  render() {

    const { images }  = this.state

    return (
      <Default
        pageTitle="Gallery"
      >
        <article className="wrapper">
          <h1>See our latest on the job snaps!</h1>

          <CloudinaryContext cloudName="delpknfnx">

            <div className={styles.gallery}>

                { images.map((data, index) => (
                  <div key={index}>
                      <h2>{data.context.custom.caption}</h2>

                      <Image 
                        publicId={data.public_id}
                        alt={data.context.custom.caption}
                        dpr="auto"
                        responsive
                        width="auto"
                        responsiveUseBreakpoints="true"
                        loading="lazy"
                      >
                        <Transformation
                          quality="auto"
                          fetchFormat="auto"
                        />
                      </Image>
                      <p>{data.context.custom.alt}</p>
                  </div>
                  ))}

            </div>
          </CloudinaryContext>
        </article>
      </Default>
    );
  }
}

export default Gallery

This works in development but when I push to Vercel nothing is rendered. I presume I need to use getStaticProps to fetch the data or something, but to be honest I'm out of my depth and don't know how to go about that.

If anyone could give me any pointers as to how I go about doing this then it would be much appreciated.

Relevent errors:

353-366f7d207b2d16799427.js:1 Mixed Content: The page at 'https://newtings.vercel.app/gallery/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://res.cloudinary.com/delpknfnx/image/list/something.json'. This request has been blocked; the content must be served over HTTPS.

Uncaught (in promise) Error: Network Error
    at t.exports (353-366f7d207b2d16799427.js:1)
    at XMLHttpRequest.d.onerror (353-366f7d207b2d16799427.js:1)