I was using the default component to optimize images in my Next JS app but found out that the site can't be hosted anywhere else apart from Vercel if the default Image Optimization component is used. Apart from that, the site can't also be exported to be hosted on other web hosting platforms.

The drawbacks with the inbuilt Image Component led me to the next-optimized-images package which includes image optimization and other benefits as the inbuilt Next Image component.

It requires me to create a babel.rc with the following configuration:

{
  "presets": ["next/babel"],
  "plugins": ["react-optimized-image/plugin"]
}

I also modified my next.config.js to the following:

const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages({
  /* config for next-optimized-images */

  // your config for other plugins or the general next.js here...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  },
  reactStrictMode: true,
});

The next-optimized-image inbuilt Img component can be utilized like this:

import Img from 'react-optimized-image';
// react-optimized-image is specified in the docs explicitly
import HeroImage from '../../../public/images/dashboard-on-mobile-and-desktop-screen.png'

export default function Hero(){
  return (
    <>
      <Img  src={HeroImage} sizes={[614]}/>
    </>
  )
}

After doing all these and I run npm run dev, I get the following errors in my console:

(node:22516) UnhandledPromiseRejectionWarning: Error: Input buffer contains unsupported image format
(Use `node --trace-warnings ...` to show where the warning was created)
(node:22516) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by 
rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:22516) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

How do I fix this problem? Thanks in advance