Next.js v12生产模式下无法动态访问public文件夹文件问题

问题原因 #

Next.js v12的生产模式默认对静态资源做构建时预打包处理，只会将构建执行前就存放在public目录的文件纳入静态资源服务列表，运行时新增的public文件不会被自动识别，开发模式下因为有实时文件监听所以不存在这个问题。

解决方案 #

根据你的使用场景可以选择以下两种方案： #

方案1：使用自定义服务器处理动态静态资源 #

如果你的场景必须支持运行时动态新增public文件访问，需要自定义Node服务器接管静态资源路由：

1. 项目根目录新建server.js，内容如下：

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const fs = require('fs')
const path = require('path')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true)
      const { pathname } = parsedUrl
      // 匹配public目录资源请求
      const publicPath = path.join(__dirname, 'public', pathname)
      if (fs.existsSync(publicPath) && fs.statSync(publicPath).isFile()) {
        // 直接返回public目录下的文件
        fs.createReadStream(publicPath).pipe(res)
        return
      }
      await handle(req, res, parsedUrl)
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})

2. 修改package.json的启动脚本：

{
  "scripts": {
    "start": "cross-env NODE_ENV=production node server.js"
  }
}

Windows环境直接设置NODE_ENV会报错，提前安装cross-env包即可正常执行。 #

方案2：调整资源存储路径 #

如果没有强绑定public目录的需求，可以将动态新增的文件存放到其他专用存储目录，写专门的API接口来提供文件访问服务，这种方案更符合Next.js的生产最佳实践，也方便后续做权限控制、CDN缓存等扩展。 #

注意事项 #

• 不要在生产环境依赖public目录的动态写入能力，Next.js的官方设计中public目录仅用于存放构建时就确定的静态资源
• 多实例部署场景下，本地文件系统的动态写入会出现实例间资源不同步的问题，建议搭配对象存储服务使用

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