Next.js public目录动态新增图片运行时返回404有什么解决办法？

Next.js 在执行 next build 构建阶段会扫描 /public 目录下的所有静态资源并录入内置静态服务的映射表，next start 启动生产服务后不会再监听 /public 目录的文件变动，因此运行阶段由外部程序写入的新增图片不会被识别，访问就会返回404。

• 方案1：直接由ASP.NET后台托管图片资源
  改动最小的方案，不需要调整Next.js配置，直接将图片引用路径改为指向ASP.NET后台的静态资源地址即可：

  <img
    src={`https://你的ASP.NET后台服务地址/cms_images/${dataFromPageAPI.imageFileName}`}
  />
  

  仅需要在ASP.NET后台配置静态资源托管规则，并添加对应的跨域响应头允许Next.js站点域名访问即可。

• 方案2：通过Next.js Rewrite代理请求
  如果你希望保持现有图片引用路径不变、且不暴露ASP.NET后台服务地址，可以在 next.config.js 中配置重写规则，将所有/cms_images前缀的请求自动转发到ASP.NET后台：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    async rewrites() {
      return [
        {
          source: '/cms_images/:path*',
          destination: 'https://你的ASP.NET后台服务地址/cms_images/:path*',
        },
      ]
    },
  }
  
  module.exports = nextConfig
  

  该方案前端代码无需任何修改即可生效。

• 方案3：新增Next.js API路由读取本地图片
  如果你确定要将图片存在Next.js服务所在服务器的/public/cms_images目录下，可以新增API路由来运行时读取本地文件返回给前端：

  1. 新建路由文件（App Router版本路径：app/api/cms-images/[filename]/route.js）：

  import fs from 'fs/promises'
  import path from 'path'
  
  export async function GET(_, { params }) {
    const { filename } = params
    // 拼接本地图片绝对路径
    const imagePath = path.join(process.cwd(), 'public', 'cms_images', filename)
    try {
      const imageBuffer = await fs.readFile(imagePath)
      // 根据后缀匹配正确的Content-Type
      const ext = path.extname(filename).toLowerCase()
      const contentType = {
        '.jpg': 'image/jpeg',
        '.jpeg': 'image/jpeg',
        '.png': 'image/png',
        '.gif': 'image/gif',
        '.webp': 'image/webp'
      }[ext] || 'application/octet-stream'
      return new Response(imageBuffer, {
        headers: { 'Content-Type': contentType }
      })
    } catch (e) {
      return new Response('Image not found', { status: 404 })
    }
  }
  

  2. 调整前端图片引用路径：

  <img
    src={`/api/cms-images/${dataFromPageAPI.imageFileName}`}
  />
  

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