Fetch() works locally, but fails after deploying to netlify (Next.js 13)

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) {

    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 (
            <h1>{ employee.name }</h1>
            <h3>{ employee.title }</h3>

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.


  • 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?

I can visit the URL: https://dynamic-routes--dundermifflininc.netlify.app/team/1, have you solved the issue? If not, how can we reproduce the issue?

Sorry I forgot to update this thread. The issue turned out to be with Next.js. Details here