Next.js 自定义配置导致索引 404 - next-images、next-css、webpack、lquip-loader

Posted 2023-03-10

【中文标题】Next.js 自定义配置导致索引 404 - next-images、next-css、webpack、lquip-loader

【英文标题】：Next.js custom config resulting in 404 on index - next-images, next-css, webpack, lquip-loader

【发布时间】：2020-12-04 12:41:06

【问题描述】：

我正在尝试让 next-images 和 next-css 与编辑我的 webpack 配置（通过 next-css）一起工作，以允许图像加载器解析图像..

尝试此操作后，我发现了 next-compose-plugins，它旨在帮助加载下一个插件..

在遵循他们的文档之后，我稍微拼凑了一个 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)

但是，我不确定这是否正确，因为这样做并重新启动本地开发服务器后，我现在在 http://localhost:3000/ 上运行 404

非常感谢任何帮助，因为我遇到了困难，因为控制台日志只是 404，我无法调试..

提前致谢，

詹姆斯

【问题讨论】：

我唯一突然发现的是`useFileSystemPublicRoutes: false,`这是故意的吗？

嘿 @ramakay 感谢您扫描它：D 我通过遵循 next-compose-plugins 的文档来获取它 - 来源：npmjs.com/package/next-compose-plugins#examples

将此设置为 true 似乎已经解决了这个问题，所以现在我还有其他问题，但现在我可以访问控制台和 dom 尝试调试：D 谢谢

【参考方案1】：

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

将此设置为 true，解决了我的 404

我在一个默认的 next.js 配置旁边交叉引用了它，它默认为 true，所以不知道为什么 next-compose-plugins 文档会建议这个但是是的.. 希望这可以帮助进一步的人..

ofc 喊出@Ramakay 的正确答案

【讨论】：

谢谢 - 应该添加这个作为答案，很高兴它有帮助！