Next.js升级至v12.2.3后Webpack配置验证错误求助

1. 升级next-superjson插件到兼容版本 #

问题根源是旧版本的next-superjson与Next.js v12.2.3的Webpack配置规则不兼容——v12.2.3调整了内部Webpack规则结构，插件仍在使用已废弃的pages、appDir等include属性，导致验证报错。执行以下命令升级插件：

yarn upgrade next-superjson@latest

2. 确认middleware.js格式合规 #

确保根目录的middleware.js符合Next.js v12.2.x的要求，示例正确结构：

export function middleware(request) {
  // 在这里编写你的中间件逻辑
}

// 可选：指定匹配路径，不写则默认匹配所有路径
export const config = {
  matcher: '/:path*',
}

3. 彻底清理缓存并重启 #

完成上述操作后，再次清理缓存并重新安装依赖：

rm -rf .next node_modules
yarn install
yarn dev

如果升级插件后问题仍存在，可以临时修改next.config.js，手动覆盖插件的Webpack配置（仅作应急方案）：

const { withSuperjson } = require('next-superjson')

module.exports = withSuperjson()({
    images: {
        domains: [`${process.env.S3_UPLOAD_BUCKET}.s3.amazonaws.com`],
        formats: ['image/avif', 'image/webp'],
    },
    eslint: {
        ignoreDuringBuilds: true,
    },
    webpack: (config) => {
        // 过滤掉插件注入的包含无效属性的规则
        config.module.rules = config.module.rules.filter(rule => {
            if (rule.include && (rule.include.pages || rule.include.appDir)) {
                return false
            }
            return true
        })
        return config
    }
});

内容的提问来源于stack exchange，提问作者Ivan