将Next.js Pages Router下载代理API转换为App Router实现方案

转换后完整代码（App Router） #

在App Router架构下，需将API路由放在app/api/download/route.ts路径下（路由名称可自定义），实现代码如下：

import axios from 'axios';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  // 解析请求参数
  const { searchParams } = new URL(request.url);
  const url = searchParams.get('url');
  const name = searchParams.get('name');

  if (!url) {
    return new NextResponse(null, { status: 500 });
  }

  try {
    const filename = name || url.split('/').pop() || 'download';
    const controller = new AbortController();
    const signal = request.signal;

    // 监听客户端断开事件，中断axios请求
    signal.addEventListener('abort', () => {
      controller.abort();
    });

    // 请求目标文件流
    const response = await axios.get(url, {
      responseType: 'stream',
      signal: controller.signal,
    });

    // 配置响应头
    const headers = new Headers();
    headers.set('Content-Type', 'application/octet-stream');
    headers.set('Content-Disposition', `attachment; filename="${filename}"`);

    // 以流形式返回响应
    return new NextResponse(response.data as ReadableStream, {
      headers,
      status: 200,
    });
  } catch (error) {
    // 请求失败时重定向到原文件地址
    return NextResponse.redirect(url);
  }
}

关键转换点说明 #

• 路由结构变化：App Router通过route.ts文件导出对应HTTP方法的函数（如GET），替代Pages Router的默认handler；仅导出GET时，其他请求方法会自动返回405 Method Not Allowed，无需手动判断。
• 参数获取方式：从Request对象的url解析searchParams，替代原req.query。
• 响应构建逻辑：使用NextResponse替代原res对象，通过Headers配置响应头，直接将流作为响应体返回。
• 资源泄漏防护：利用请求自带的signal监听客户端断开事件，主动中断axios请求，避免无效资源占用。
• 错误处理适配：用NextResponse.redirect实现重定向，替代原res.redirect方法。

注意事项 #

• 确保Next.js版本≥13.2，该版本后App Router的Route Handler功能稳定可用。
• 若目标文件存在跨域限制，需在Next.js配置文件中添加对应跨域代理规则，或确保axios请求不会触发CORS问题。

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