Closed jamesryan-dev closed 3 years ago
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
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
My next.config.js currently exsists as such:
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