Next.js custom config resulting in 404 on index - next-images, next-css, webpack, lquip-loader

I'm attempting to get next-images and next-css to work alongside editing my webpack config (via next-css) to allow for a image-loader to parse the images..

After attempting this I found next-compose-plugins which is meant to help in loading of next plugins..

After following their documentation I've somewhat pieced together a next.config.js:

const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css')
const withImages = require('next-images');

// next.js configuration
const nextConfig = {
  useFileSystemPublicRoutes: false,
  distDir: 'build',
};

module.exports = withPlugins([
  [withCSS, {
    webpack: (config, options) => {
      const { isServer, dev } = options
      config.module.rules.push({
            test: /\.(jpe?g|png|svg|gif|ico|webp)$/,
            use: [
              {
                loader: 'lqip-loader',
                options: {
                  fallback: 'file-loader',
                  base64: !dev,
                  publicPath: '/_next/static/images/',
                  outputPath: `${isServer ? '../' : ''}static/images/`,
                  name: '[name]-[hash].[ext]',
                  palette: true
                }
              }
            ]
          })
        return config
      },
      cssLoaderOptions: {
        url: false
       }
    }
  ],
  withImages
], nextConfig)

Any help greatly appreciated as I've hit a wall in that the console log is simply a 404 and I'm unable to debug..

Thanks in advance,

James