I initially used the default Image Optimization component in my Next JS app, only to realize that the site could only be hosted on Vercel and not on other web hosting platforms. This limitation prompted me to explore the next-optimized-images package, which offers image optimization and additional benefits compared to the built-in Next Image component.
To implement this package, I had to create a babel.rc file with specific configurations:
{
"presets": ["next/babel"],
"plugins": ["react-optimized-image/plugin"]
}
I then made adjustments to my next.config.js as follows:
const withOptimizedImages = require('next-optimized-images');
module.exports = withOptimizedImages({
/* config for next-optimized-images */
// additional plugins or general next.js configuration goes here...
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
},
reactStrictMode: true,
});
Utilizing the Img component from next-optimized-image can be done like this:
import Img from 'react-optimized-image';
// make sure to refer to react-optimized-image in the documentation
import HeroImage from '../../../public/images/dashboard-on-mobile-and-desktop-screen.png'
export default function Hero(){
return (
<>
<Img src={HeroImage} sizes={[614]}/>
</>
)
}
However, upon running npm run dev, errors showed up 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.
If you have any suggestions on how to resolve this issue, your input would be greatly appreciated. Thank you.