Javascript 无法重定向到Next.js中的动态URL

在我的Next.js14应用程序中，我有一个/research/page.tsx文件，其中我接收一个文件作为用户输入，并将其发送到服务器端API进行进一步处理.下面是实现这一点的方法:

const handleFileDrop = async (file: File) => {
    // Convert file to blob
    const arrayBuffer = await file.arrayBuffer()
    const blob = new Blob([arrayBuffer])
    const paperId = await generateFileId(arrayBuffer)
    const paperTitle = file.name

    // Send file to api/upload for upload to S3
    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: file,
      })
      if (!res.ok) throw new Error(await res.text())
      console.log(await res.json())
    } catch (error: any) {
      // handle error
    }
  }

在服务器上，/api/upload/route.ts处的API旨在对文件执行一系列操作，并在完成后将用户重定向到新的动态生成的路由:

/* eslint-disable import/prefer-default-export, @typescript-eslint/no-unused-vars */

import { NextRequest, NextResponse } from "next/server"
import generateFileId from "@/lib/generate-file-id"
import { PDFLoader } from "langchain/document_loaders/fs/pdf"
// import AWS from "aws-sdk"

// const s3 = new AWS.S3()

async function streamToArrayBuffer(stream: ReadableStream) {
  return new Uint8Array(await new Response(stream).arrayBuffer())
}

export async function POST(request: NextRequest) {
  const data = await request.body
  if (!data) return NextResponse.json({ success: false })
  const arrayBuffer = await streamToArrayBuffer(data)
  const blob = new Blob([arrayBuffer])
  const loader = new PDFLoader(blob)
  const pageLevelDocs = await loader.load()
  const pageCount = pageLevelDocs.length
  const paperId = await generateFileId(arrayBuffer)

  /*
  STEP 1: Upload file to S3
  STEP 2: Add reference to file in Postgres
  */
  console.log("test")
  return NextResponse.redirect(new URL(`/research/${paperId}`, request.url))
}

在console.log("test")的声明中，一切都很正常.但重定向不会奏效.浏览器保持在/research，而不是重定向到/research/[paperId].

我甚至try 在API成功响应时从客户端重定向，使用useRouter和router.push()，但即使这样也不起作用:

const handleFileDrop = async (file: File) => {
    // Convert file to blob
    const arrayBuffer = await file.arrayBuffer()
    const blob = new Blob([arrayBuffer])
    const paperId = await generateFileId(arrayBuffer)
    const paperTitle = file.name

    // Send file to api/upload for upload to S3
    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: file,
      })
      if (!res.ok) throw new Error(await res.text())
      console.log(await res.json())
      const router = useRouter()
      router.push("/research/${paperId}")
    } catch (error: any) {
      // handle error
    }
  }

浏览器将保留原始URL.

我有两个问题:

我的代码中缺少什么，以及 应对这种情况的传统方法是什么？我需要新的页面能够访问file对象也.