Azure静态Web应用部署Next.js时图片404问题求助

Image组件404问题解决 #

你的问题核心是Next.js Image组件的图片优化路由在纯静态部署环境下无法工作：CSS背景图直接访问public目录下的文件，因此能正常加载；但next/image默认会通过/_next/image路由提供优化后的图片，而Azure静态Web应用作为纯静态站点，没有Node.js服务处理该路由，所以返回404。

解决步骤：

1. 配置Next.js静态导出模式
   在项目根目录创建或修改next.config.js，添加以下配置：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     // 指定静态导出模式，生成纯静态文件
     output: 'export',
     // 禁用Image组件的优化服务，直接输出public目录的图片链接
     images: {
       unoptimized: true,
     },
   }
   
   module.exports = nextConfig
   

2. 验证本地构建结果
   执行npm run build，项目会生成out目录，检查out/images/icon/Message.png是否存在。随后用本地静态服务器（比如npx serve out）测试，此时Image组件会生成直接指向/images/icon/Message.png的链接，而非/_next/image路由，不会出现404。

3. 调整Azure部署配置
   在Azure静态Web应用的门户配置中，确保：

   • 构建命令设置为npm run build
   • 输出目录设置为out

npm export报错问题解决 #

执行npm export报错是因为package.json中未定义export脚本，且Next.js 13的静态导出需要先执行next build再执行next export。

修改package.json的scripts部分，推荐将构建和导出合并：

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start",
  "lint": "next lint",
  "format": "prettier --write . --ignore-path .prettierignore"
}

之后执行npm run build即可完成构建+静态导出，无需单独执行npm run export。如果需要单独导出，也可以添加：

"scripts": {
  // ...其他脚本
  "export": "next export"
}

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