Next.js 13中如何用ExpressJS托管public文件夹的上传静态文件？

如果你升级到Next.js 13后想继续实现原有的静态上传文件托管功能，分两种场景处理：

场景1：继续使用Pages Router（推荐，无需大改） #

Next.js 13并没有移除Pages Router，只要你保留原有的pages目录结构，原来的代码可以直接复用，注意以下几点：

• 确保路由文件路径是pages/api/uploads/[dirname]/[name].js（必须在pages目录下，而非app目录）
• 确认public/uploads文件夹存在且文件已正确上传到该目录
• 保留export const config = { api: { externalResolver: true } }配置，让Next.js跳过内置解析，交给express处理

场景2：切换到App Router的适配方案 #

如果已经迁移到App Router，不能直接使用express.static，需要用Next.js的Route Handlers实现：

1. 在app目录下创建路由文件：app/api/uploads/[...path]/route.js（[...path]是catch-all路由，匹配所有子路径）
2. 编写如下代码处理文件请求：

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

export async function GET(request, { params }) {
  // 拼接完整文件路径
  const filePath = join(process.cwd(), 'public', 'uploads', ...params.path);
  
  try {
    // 读取文件内容
    const fileContent = readFileSync(filePath);
    
    // 根据文件后缀设置响应的Content-Type
    const ext = filePath.split('.').pop().toLowerCase();
    let contentType = 'application/octet-stream';
    const typeMap = {
      jpg: 'image/jpeg',
      jpeg: 'image/jpeg',
      png: 'image/png',
      gif: 'image/gif',
      txt: 'text/plain',
      json: 'application/json',
      pdf: 'application/pdf'
    };
    if (typeMap[ext]) contentType = typeMap[ext];
    
    // 返回文件响应
    return new NextResponse(fileContent, {
      headers: {
        'Content-Type': contentType,
      },
    });
  } catch (error) {
    // 文件不存在时返回404
    return new NextResponse('File not found', { status: 404 });
  }
}

3. 测试访问：比如/api/uploads/xxx/yyy.jpg就能访问public/uploads/xxx/yyy.jpg文件

注意事项 #

• 若需要支持文件上传（POST请求），可以在同一个route.js中添加POST方法的处理逻辑
• 确保服务器对public/uploads目录有读取权限
• 生产环境中可以考虑添加缓存头优化性能，比如在响应头中加入Cache-Control: public, max-age=86400

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