I’m building a simple next.js app that calls fetch(). Here’s what that looks like
import Link from "next/link";
async function getEmployee(id) {
console.log(id);
const res = await fetch(
'https://dynamic-routes--dundermifflininc.netlify.app/.netlify/functions/team?id=' + id,
{ cache: 'no-store' }
);
// Handle errors
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data');
}
return await res.json();
}
export default async function Employee({ params }) {
const employee = await getEmployee(params.id);
return (
<div>
<h1>{ employee.name }</h1>
<h3>{ employee.title }</h3>
</div>
);
}
This works locally. (You can check the endpoint for yourself → https://dynamic-routes–dundermifflininc.netlify.app/.netlify/functions/team?id=1)
However, I get a 500 server error once its deployed.
Notes
- The function is in the same project as my next.js app
- The app works without error if I replace the
fetch()call with a hard-coded response.
Is there some reason I can’t fetch data from my own app? Some sort of self-referential error?