如何启用NextJS的next/future/image？配置后仍报错怎么办

核心原因 #

报错本质是Next.js服务运行时没有读取到experimental.images.allowFutureImage: true配置，和你写入配置文件的内容不匹配，99%的情况由以下问题导致：

• 修改next.config.js后未完全重启开发/构建服务：Next.js配置仅在服务启动阶段加载，热更新不会读取配置变更，仅保存文件等待页面重载不会让新配置生效。
• 实际安装的Next.js版本不符合要求：package.json中写的版本号不代表本地实际安装版本，若未重新执行依赖安装，本地node_modules中的Next版本可能低于12.2.0，根本不支持allowFutureImage配置项。
• 配置存在语法/字段错误或被覆盖：比如配置项名写错、引入的Next.js插件覆盖了experimental字段的配置，都会导致写入的配置不生效。

解决步骤 #

按顺序操作即可解决问题：

1. 完全终止当前运行的Next.js进程（按Ctrl+C杀掉终端里跑的next dev/next start/next build进程，不要留后台进程）。
2. 重新安装依赖确保版本正确，执行以下命令：

   # 删掉旧依赖和锁文件
   rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
   # 重新安装
   npm install
   # 用yarn/pnpm的话替换为对应安装命令即可
   

   安装完成后执行npm list next确认输出的版本号大于等于12.2.0，避免版本不符问题。
3. 修正next.config.js配置，你原有配置里的strictMode是错误字段名（正确字段为reactStrictMode），虽然不直接影响图片组件，但部分版本Next.js会因为非法配置字段中断后续配置解析，修正后的配置如下：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
       reactStrictMode: true,
       experimental: {
           images: {
               allowFutureImage: true,
           },
       },
       images: {
           domains: ['firebasestorage.googleapis.com'],
       },
   };
   
   module.exports = nextConfig;
   

   如果你用了withBundleAnalyzer、withPWA这类Next.js插件包裹配置，要确认插件没有覆盖experimental字段，必要时可以打印最终导出的配置，检查experimental.images.allowFutureImage是否为true。
4. 清除Next.js缓存后重启服务：

   # 删掉.next缓存文件夹
   rm -rf .next
   npm run dev
   

5. 打开浏览器硬刷新页面（清空站点缓存），报错就会消失。

补充说明 #

如果完成以上步骤还是有问题，可以直接将Next.js升级到12.3.x及以上版本，该版本后next/future/image的配置识别bug已经被修复，后续13版本中该组件已经作为默认next/image组件正式上线，不再需要额外开启实验开关。

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