next.config.js

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const webpack = require("webpack");
const path = require("path");

module.exports = withPlugins([[withImages]], {
  webpack(config, options) {
    config.resolve.modules.push(path.resolve("./"));
    return config;
  },
  images: {
    loader: "imgix", 
    path: "https://noop/", // See issue with 'custom' loader here - https://github.com/vercel/next.js/issues/21079
    // limit of 25 deviceSizes values
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    // limit of 25 imageSizes values
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   // disable static imports for image files
   disableStaticImages: false,
   // minimumCacheTTL is in seconds, must be integer 0 or more
   //minimumCacheTTL: 60,
  },
});