Use instead of next-images package https://www.npmjs.com/package/next-images

with-images.js

const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "svg", "gif", "ico", "webp", "jp2", "avif"];

/**
 * Send images as URL over certain threshould. You don't need this for next/Image component.
 * Alternative to next-images package.
 *
 * @type {import('next').NextConfig}
 **/
module.exports = config => () => {
  return {
    ...config,
    webpack(config, options) {
      const { isServer } = options;

      config.module.rules.push({
        test: new RegExp(`\.(${IMAGE_EXTENSIONS.join("|")})$`),
        // Next.js already handles url() in css/sass/scss files
        issuer: /\.\w+(?<!(s?c|sa)ss)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              fallback: "file-loader",
              outputPath: `${isServer ? "../" : ""}static/images/`,
              publicPath: `/_next/static/images/`,
              name: "[name]-[hash].[ext]"
            }
          }
        ]
      });

      if (typeof config.webpack === "function") {
        return config.webpack(config, options);
      }

      return config;
    }
  };
};