How to add image exports

[jamesryan-dev]

Hello,

I am trying to use next/image and ran into an error that I hope to resolve by adding this code to my next.config.js

  images: {
    domains: [
      'images.ctfassets.net'
    ]
  }
}

My next.config.js currently exsists as such:

const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withImages = require("next-images");
const optimizedImages = require("next-optimized-images");
const path = require("path");
const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");
const withSourceMaps = require("@zeit/next-source-maps");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

// next.js configuration

const nextConfig = {
  useFileSystemPublicRoutes: true,
  images: {
    domains: ["https://cdn.shopify.com"],
  },
  // distDir: 'build',
};

module.exports = withPlugins(
  [
    [withBundleAnalyzer({})],
    [
      withSourceMaps,
      {
        webpack: (config, { dev, isServer }) => {
          // let { isServer, dev } = options
          if (!dev && !isServer) {
            config.optimization.minimizer = [
              new TerserPlugin({
                parallel: true,
                sourceMap: true,
              }),
            ];
          }

          return config;
        },
      },
    ],
    [
      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/public/",
                  outputPath: `${isServer ? "../" : ""}public`,
                  name: "[name]-[hash].[ext]",
                  palette: true,
                  // base64: true,
                },
              },
            ],
          });
          config.optimization.minimizer = [];
          config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
          return config;
        },
        cssLoaderOptions: {
          url: false,
        },
      },
    ],
    [withImages],
    [
      optimizedImages,
      {
        optimizeImagesInDev: true,
        webpack: (config) => {
          config.resolve.alias.images = path.join(__dirname, "/public/images");
          return config;
        },
      },
    ],
  ],
  nextConfig
);

Wondering if anyone could help inform me where to add these kinda of 'minor' edits to the config because they don't seem to be apart of any plugin per say but simply the config?

Thanks in advance, James