Next.js App Router中使用express.static作路由处理器遇问题求助

你遇到的TypeError是因为App Router的API路由使用只读的NextRequest对象，而express内部会尝试修改请求对象的url属性，这和Next.js的请求对象机制冲突，因此不能直接把express handler作为GET导出。

以下是可行的解决方案，无需依赖express，直接通过App Router的API路由实现：

实现步骤 #

1. （可选）安装文件类型识别依赖（自动匹配Content-Type）：

npm install mime-types
# 或
yarn add mime-types

2. 编写API路由代码（src/app/api/external/[filename]/route.ts）：

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

// 替换为你的外部文件夹绝对路径
const EXTERNAL_DIR = '/path/to/external/directory';

export async function GET(
  _request: Request,
  { params }: { params: { filename: string } }
) {
  const { filename } = params;
  
  // 构建文件绝对路径，同时做路径遍历防护
  const filePath = path.resolve(EXTERNAL_DIR, filename);
  const normalizedExternalDir = path.normalize(EXTERNAL_DIR) + path.sep;
  
  // 强制校验：确保请求的文件在目标目录范围内，防止恶意路径访问
  if (!filePath.startsWith(normalizedExternalDir)) {
    return new NextResponse('Invalid file path', { status: 403 });
  }

  try {
    // 读取文件内容
    const fileBuffer = await fs.readFile(filePath);
    // 获取文件对应的Content-Type，默认返回二进制流类型
    const contentType = mime.lookup(filePath) || 'application/octet-stream';
    
    // 返回文件响应，可添加缓存头优化静态资源加载
    return new NextResponse(fileBuffer, {
      headers: {
        'Content-Type': contentType,
        'Cache-Control': 'public, max-age=31536000',
      },
    });
  } catch (err: any) {
    // 处理文件不存在的情况
    if (err.code === 'ENOENT') {
      return new NextResponse('File not found', { status: 404 });
    }
    // 其他服务器错误返回500
    return new NextResponse('Server error', { status: 500 });
  }
}

关键说明 #

• 安全防护：必须保留路径校验逻辑，避免攻击者通过构造filename参数（如../../etc/passwd）访问服务器敏感文件。
• 缓存优化：根据文件类型调整Cache-Control头，静态资源设置长缓存时间可大幅提升访问性能。
• 无依赖替代：如果不想安装mime-types，可以手动映射常见文件扩展名与Content-Type（如.jpg对应image/jpeg）。

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