Next.js多URL参数路由配置问题求助

问题核心 #

你混淆了URL查询参数和动态路由路径参数：

• 你的请求是/api/upload?file=${filename}&fileType=${fileType}，属于查询参数（?后缀的键值对）
• 但你用了动态路由的文件夹结构[filename]/[fileType]，这是用来处理路径参数（比如/api/upload/xxx.jpg/image/jpeg）的，完全不匹配当前请求模式。同时Next.js在app/api/upload/根目录下找不到route.ts，所以抛出了"No HTTP methods exported"的错误。

正确解决方案（针对查询参数） #

1. 调整文件结构 #

删除嵌套的[filename]和[fileType]文件夹，直接把route.ts放在app/api/upload/目录下，最终结构：

app 
   api
      upload
            route.ts

2. 修改route.ts代码（从查询参数取值） #

查询参数无法通过params对象获取，需要从request.url中解析：

import S3 from "aws-sdk/clients/s3";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  // 解析URL中的查询参数
  const url = new URL(request.url);
  const filename = url.searchParams.get("file");
  const fileType = url.searchParams.get("fileType");

  // 校验必要参数是否存在
  if (!filename || !fileType) {
    return NextResponse.json({ error: "缺少filename或fileType参数" }, { status: 400 });
  }

  const s3 = new S3({
    signatureVersion: "v4",
    region: "us-east-2",
    accessKeyId: process.env.ACCESS_KEY,
    secretAccessKey: process.env.SECRET_KEY,
  });

  const preSignedUrl = await s3.getSignedUrl("putObject", {
    Bucket: process.env.BUCKET_NAME,
    Key: filename,
    ContentType: fileType,
    Expires: 5 * 60,
  });

  return NextResponse.json({ preSignedUrl });
}

3. 修复前端代码的字段错误 #

你前端代码中错误地将后端返回的preSignedUrl字段当作url解析，需要修正：

const res = await axios(`/api/upload?file=${filename}&fileType=${fileType}`);
const { preSignedUrl } = res.data; // 替换原有的`url`字段

// 后续上传请求使用正确的预签名URL
const upload = await axios.put(preSignedUrl, file, config);

可选方案：改用动态路由路径参数 #

如果你想切换为路径参数模式（比如/api/upload/${filename}/${fileType}），可以按以下配置：

1. 保留现有文件结构 #

app 
   api
      upload
            [filename]
                      [fileType]
                                route.ts

2. 修改前端请求URL #

将查询参数改为路径参数：

const res = await axios(`/api/upload/${filename}/${fileType}`);

3. 注意事项 #

你的现有route.ts代码已经适配路径参数模式，但要注意文件名如果包含.、/等特殊字符，需要提前做转义处理，避免路由解析失败。

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