Next.js 自定义配置导致索引 404 - 下一个图像，下一个 css，webpack，lquip-loader

Question

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)

I'm not sure if this is correct however, as since doing so, and restarting my local dev server, I'm now 404-ing on http://localhost:3000/

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

Answer 1

const nextConfig = {
  useFileSystemPublicRoutes: true,
  distDir: 'build',
};

Setting this to true, resolved my 404

I cross referenced this alongside a defult next.js config and it's default it true so no idea why the next-compose-plugins doc's suggest this but yeah.. hopefully that helps someone further down the line..

ofc shoutout @Ramakay for the correct answer