503 error when fetching an internal NextJS api with query parameters on AWS Amplify

I am trying to fetch data from a JSON file through NextJS internal API on the client side. But it is always throwing 503 error:

The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions.
We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.

I tried to use the GET method with query params in the URL, but it didn't work, then I try the POST method with the query in the body(just to test out), but it also didn't work either. Here is the code:

const response = await fetch(`/api/search?q=${query}`, {
    method: "GET",
    headers: {
      'Content-Type': 'application/json',
    },
})
const res = await response.json()

I have another component that sends some user inputs to save in my DB, and it is working perfectly. (I am really confused why one works but not other given both are equivalent request)

Also, the same app deployed on Vercel is working perfectly. So I think the issue is with Amplify.

Anyone had similar issues with the Next app on Amplify? please help.