De los documentos nextJs:

Next.js puede servir archivos estáticos, como imágenes, en una carpeta llamada pública en el directorio raíz. El código puede hacer referencia a los archivos dentro de public a partir de la URL base (/).

siempre que sus imágenes estén en la carpeta pública, no tiene que importarlas, así que manténgalas como están.

 // TEMPLATE_TYPES img: '/img1.png'

pero ten en cuenta que:

Nota: Next.js solo servirá los activos que estén en el directorio público en el momento de la compilación. Los archivos agregados en tiempo de ejecución no estarán disponibles. Recomendamos utilizar un servicio de terceros como AWS S3 para el almacenamiento persistente de archivos.

Consulte los documentos sobre cómo publicar contenido estático para obtener más información.

Otra cosa, en el futuro tal vez desee acceder a los archivos desde un dominio remoto, como aws bucket, en tal caso, debe agregar el dominio en next.config.js así:

 // next.config.js file module.exports = { images: { domains: ['example.com', 'example2.com'], }, }

para más información echa un vistazo aquí

y finalmente, puede crear un componente que obtenga el objeto y represente sus imágenes:

 const RenderImage = (props) => { const images = props.images; return ( <> {images.map((img, i) => ( <div key={i}> <h4>{img.name}</h4> <Image src={img.img} width={500} height={300} /> </div> ))} </> ); }; //Later somewhere on your code: <RenderImage images={TEMPLATE_TYPES} />

El código anterior es solo un ejemplo, pero creo que entendiste la idea, consulta también los documentos de API sobre el componente de imagen. ¡Espero haber ayudado un poco!