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

[ben519]

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?

[hrishikesh]

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?

[ben519]

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