Next.js：服务器启动后如何刷新public目录？

核心逻辑 #

Next.js生产环境启动时会把public目录的资源预映射到静态路由，后续新增的文件不会被自动识别——因为生产模式下的静态资源路由是构建/启动时生成的，运行时不会再扫描public目录。要绕开这个限制，核心是不要把用户上传的动态文件放到public目录下，改用以下几种方式处理：

方案1：自定义API路由处理动态文件请求 #

创建一个API路由（比如app/api/files/[filename]/route.js），直接读取服务器上非public目录的文件（比如./uploads）并返回内容。示例代码：

import fs from 'fs/promises';
import path from 'path';
import { NextResponse } from 'next/server';

export async function GET(request, { params }) {
  const filename = params.filename;
  const filePath = path.join(process.cwd(), 'uploads', filename);

  try {
    const fileBuffer = await fs.readFile(filePath);
    // 根据文件扩展名动态设置Content-Type，这里简化处理
    const ext = path.extname(filename).slice(1);
    const contentType = ext === 'png' ? 'image/png' : 'application/octet-stream';
    
    return new NextResponse(fileBuffer, {
      headers: { 'Content-Type': contentType }
    });
  } catch (err) {
    return new NextResponse('文件不存在', { status: 404 });
  }
}

用户上传的文件直接存到./uploads，前端通过/api/files/baz.png就能访问新增文件，无需重启服务器。

方案2：自定义服务器托管动态目录 #

如果用Express搭配Next.js搭建自定义服务器，直接用express.static托管动态文件目录，新增文件会被实时识别。示例：

const express = require('express');
const next = require('next');
const path = require('path');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();
  
  // 托管uploads目录，前端直接通过/uploads/baz.png访问
  server.use('/uploads', express.static(path.join(__dirname, 'uploads')));
  
  server.all('*', (req, res) => handle(req, res));
  
  server.listen(3000, () => {
    console.log('> Ready on http://localhost:3000');
  });
});

方案3：用第三方对象存储服务 #

把用户上传的文件放到S3、阿里云OSS这类对象存储服务中，直接用存储服务提供的CDN链接访问——这种方式完全和Next.js服务器解耦，自然不需要重启服务器。

不建议修改public目录的原因 #

Next.js生产模式下，public目录的资源会被打包优化并生成静态路由映射，运行时不会监听该目录变化。强行监听public目录并刷新路由，会破坏生产环境的性能优化，还可能引发内存泄漏或稳定性问题。

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