Estoy usando el siguiente código para obtener imágenes de Cloudinary y mostrarlas en una galería simple creada con 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

Esto funciona en desarrollo, pero cuando presiono a Vercel, no se muestra nada. Supongo que necesito usar getStaticProps para obtener los datos o algo así, pero para ser honesto, estoy fuera de mi alcance y no sé cómo hacerlo.

Si alguien pudiera darme algún consejo sobre cómo hacer esto, sería muy apreciado.

Errores relevantes:

 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)