如何在 Next.js 中创建 api 动态路由？

Question

我正在尝试为 GET 请求向 api 文件夹添加动态路由。
在这种情况下它工作正常
api/[product]

const baseUrl ='https://myUrl'
 const { product } = req.query
  const url = `${baseUrl}/${product}`

然后在 Postman returns 中测试 http://localhost:3000/api/phone 正确的结果。目前还好。
然后，我不想按产品获取 api，而是希望我的动态属性成为过滤器值。
特定 api 提供的过滤器语法如下所示 ?$filter=name eq 'Milk'.
当我在邮递员或浏览器中测试时，前端过滤工作正常。

https://myUrl/phone?$filter=name eq 'iphone'

现在我尝试做与上面完全相同的事情，现在在 api 文件夹中。但是它 returns 404 This page could not be found..

api/[productType]

const baseUrl ='https://myUrl/phone?$filter'
 const { productType } = req.query
  const url = `${baseUrl}=${productType}`

在Postman中我是这样测试的：

`http://localhost:3000/api/phone=name-eq-'iphone'`

并获得 404 响应。如何解决这个问题？任何帮助将不胜感激。

Answer 1

我在 https://github.com/vercel-support/so-71663454-nextjs-route-poc 上用

创建了一个演示

// /api/[productType]

export default function handler (req, res) {
  const baseUrl ='https://myUrl/phone?$filter'

  const { productType } = req.query
  
  const url = `${baseUrl}=${productType}`
  res.json({ productType, query: req.query, url })
}

如果您使用 https://so-71663454-nextjs-route-poc.vercel-support.app/api/phone=name-eq-'iphone'

访问 link

您应该能够看到以下结果：

{
  "productType": "phone=name-eq-'iphone'",
  "query": {
    "productType": "phone=name-eq-'iphone'"
  },
  "url": "https://myUrl/phone?$filter=phone=name-eq-'iphone'"
}

如何在 Next.js 中创建 api 动态路由？

How to create an api dynamic route in Next.js?

reactjs

rest

next.js