title: How to use API Route in next js?
body: <p>I am learning how to design api and at the same time how to use next js api route.
  i have set my first route api/property/[propertyId]  that returns the specific property detail</p>
  <p>now i am trying to set a dynamic route for the specific property id in page folder page/property/[propertyId]. My issue is when i am getting directed on the specific page the data is not there as expected. i am receiving response for error message.
  Can someone point out what i did wrong ,please?
  thanks</p>
  <pre><code>pages&gt;api&gt;property&gt;[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) =&gt; property.id === propertyId)
      filteredProp.length &gt; 0 ?  res.status(200).json(filteredProp[0]) : res.status(404).json({message: `Property with id: ${propertyId} not found.` })
       })
      
  }
  
  </code></pre>
  <pre><code>pages&gt;property&gt;[id].js
   
  export const getDetails = async() =&gt; {
        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
          }
      }
  }
  </code></pre>