Alguna solución para este error? <code>Error: Failed to parse src &quot;images.jfif&quot; on `next/image`, if using relative image it mus...

Hola, hace poco me pasó lo mismo en el mismo curso de Next.js Lo que descubrí es que la API tiene mucha basura o links de imágenes que no están bien.

Para evitar eso tuve que agregar algunas validaciones al ProductList.jsx

import React from 'react'
import ProductItem from '@components/ProductItem'
import useGetProducts from '@hooks/useGetProducts'
import styles from '@styles/ProductList.module.scss'

const API = "https://api.escuelajs.co/api/v1/products"

const ProductList = () => {
  const products = useGetProducts(API)

  return (
    <section className={styles['main-container']}>
      <div className={styles.ProductList}>
        {products.map(product => {
          if (product.images.length > 0 
            && product.images[0] !== '' 
            && product.images[0] !== 'asdfa'
            && product.images[0] !== 'asdfaf'
            && product.images[0] !== 'hjk'
            && product.images[0] !== 'none'
            && product.images[0] !== 'ggggg'
            && product.images[0] !== 'perfil.jpg'
            && !product.images[0].includes("https://cdn1.coppel.com/images/catalog/pm/")          
          ) {
            return (
              <ProductItem product={product} key={product.id}/>
            )
          }
        })}
      </div>
    </section>
  )
}

export default ProductList

Es engorroso y el código se ve feo, pero es lo que descubrí que puede evitar esos error mientras tenemos una API más limpia.