如何在下一个js中使用API路由？

Question

我正在学习如何设计 api 以及如何使用 next js api 路由。我已经设置了我的第一条路线 api/property/[属性Id] returns 具体属性详细信息

现在我正在尝试为页面文件夹 page/property/[属性Id] 中的特定属性 id 设置动态路由。我的问题是，当我在特定页面上获得指示时，数据并不像预期的那样存在。我收到错误消息的响应。有人可以指出我做错了什么吗？谢谢

pages>api>property>[propertyId]

export default function propertyHandler ({query : {propertyId} } ,res) {
    var parser = new xml2js.Parser({explicitArray : false});
    const data = fs.readFileSync(path.join(process.cwd(),'listing.xml'))
    parser.parseString(data,function (err, results){
    results = results.client.secondhandListing.property

    const filteredProp = results.filter((property) => property.id === propertyId)
    filteredProp.length > 0 ?  res.status(200).json(filteredProp[0]) : res.status(404).json({message: `Property with id: ${propertyId} not found.` })
     })
    
}

pages>property>[id].js
 
export const getDetails = async() => {
      const res = await fetch(`${baseUrl}/api/property/[property.Id]}`)
      const data = res.json()

      return data
  }

export async function getServerSideProps({params: { id } }) {
    const data = await getDetails(`${baseUrl}/api/property/${id}`)

    return {
        props: {
            propertyDetails: data
        }
    }
}

Answer 1

我从其他地方得到了我的错误的答案。是我的 getdetails 函数出错了。我已经修改为

export const getDetails = async(baseUrl)=>{
    const res = await fetch(baseUrl)
    const data  = await res.json()
    return data
    
};

它奏效了。希望这对某人有帮助:)

如何在下一个js中使用API路由？

How to use API Route in next js?

api

routes

reactjs

next.js

vercel