NextJS API 路由无法访问搜索参数

Question

我有一个简单的 NextJS 应用程序，其中有一个调用 API 路由的客户端组件。

我正在尝试访问我创建的路线中的一些搜索参数，但它始终返回 null。

我的客户端组件就像这样，单击按钮即可调用我的 API

export default function ClientComponent() {

  const getData = async ({
    secretId
  }) => {
    const url = new URL('/api/mydata', window.location.href)
    url.searchParams.set('secretId', secretId) // attaches the query param and this value is definitely there
    
    const response = await fetch(url)

    const data = await response.json()

    console.log("data:", data)
  }
  
  return (
    <button onClick={handleGetSecret}>
      Reveal secret
    </button>
  )
}

然后我有一个处理请求的路由 app/api/mydata/route.tsx

import { NextRequest } from "next/server"

export async function GET(request: NextRequest) {

  const secretId = request.nextUrl.searchParams.get('secretId')

  console.log("secretId:", secretId)
  
  return Response.json({ message: 'hello', secretId })
}

但不知何故，我尝试从搜索参数中获取的

secretId

始终为空。

我也尝试将其转换为后端点以使用请求正文，但发生了同样的事情。该值始终为空

我也尝试从 Postman 调用此端点，并且发生了同样的事情。看来 NextJS 无法访问路由文件中的搜索参数，即使我尝试遵循 this here

知道什么可能导致该值返回 null，即使我在打印对象时可以在 URL 中看到搜索参数？

NextURL {
  [Symbol(NextURLInternal)]: {
    url: URL {
      href: 'http://localhost:3000/api/mydata?secretId=abc123',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/secrets',
      search: '?secretId=abc123',
      searchParams: URLSearchParams { 'secretId' => 'abc123' },
      hash: ''
    },
    options: { headers: [Object], nextConfig: undefined },
    basePath: '',
    domainLocale: undefined,
    defaultLocale: undefined,
    buildId: undefined,
    locale: undefined,
    trailingSlash: false
  }
}

Answer 1

如果您确定查询参数

secretId

已发送到您的下一个后端，请尝试

import { NextRequest } from "next/server"

export async function GET(request: NextRequest) {
    const {searchParams} = new URL(request.url)
    const secretId = searchParams.get("secretId")

    // remaing code from here