Estaba usando el componente predeterminado para optimizar las imágenes en mi aplicación Next JS, pero descubrí que el sitio no se puede alojar en ningún otro lugar que no sea Vercel si se usa el componente de optimización de imágenes predeterminado. Aparte de eso, el sitio tampoco se puede exportar para alojarlo en otras plataformas de alojamiento web.

Los inconvenientes con el componente de imagen incorporado me llevaron al paquete next-optimized-images que incluye optimización de imágenes y otros beneficios como el componente de Image siguiente incorporado.

Me requiere crear un babel.rc con la siguiente configuración:

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

También modifiqué mi next.config.js a lo siguiente:

 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, });

El componente Img incorporado next-optimized-image se puede utilizar de esta manera:

 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]}/> </> ) }

Después de hacer todo esto y ejecutar npm run dev , obtengo los siguientes errores en mi consola:

 (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.

¿Cómo soluciono este problema? Gracias por adelantado