I have tried fetch and it works fine with swapi.dev, but when I do this, it errors. All I am doing is passing the request down to the fetch function, with the appropriate headers, to do my authentication checks before a page is rendered.

export async function getServerSideProps({ req }) {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/user`, {
      credentials: "include",
      headers: {
        "Access-Control-Allow-Credentials": true,
        "X-Requested-With": "XMLHttpRequest",
        ...req.headers,
      },
    });

    console.log(res);

    const data = await res.json();
    return { props: { data } };
  } catch (error) {
    console.log(error);
    return { props: { data: [] } };
  }
  
}

TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:7188:34)
    at node:internal/deps/undici/undici:7516:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) {
  cause: Error: [object Object]
      at makeNetworkError (node:internal/deps/undici/undici:6317:51)
      at httpNetworkFetch (node:internal/deps/undici/undici:7810:16)
      at async httpNetworkOrCacheFetch (node:internal/deps/undici/undici:7703:33)
      at async httpFetch (node:internal/deps/undici/undici:7557:37)
      at async schemeFetch (node:internal/deps/undici/undici:7489:18)
      at async node:internal/deps/undici/undici:7342:20
      at async mainFetch (node:internal/deps/undici/undici:7338:20) {
    [cause]: undefined
  }
}

I have tried fetch and it works fine with swapi.dev, but when I do this, it errors. All I am doing is passing the request down to the fetch function, with the appropriate headers, to do my authentication checks before a page is rendered.

export async function getServerSideProps({ req }) {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/user`, {
      credentials: "include",
      headers: {
        "Access-Control-Allow-Credentials": true,
        "X-Requested-With": "XMLHttpRequest",
        ...req.headers,
      },
    });

    console.log(res);

    const data = await res.json();
    return { props: { data } };
  } catch (error) {
    console.log(error);
    return { props: { data: [] } };
  }
  
}

TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:7188:34)
    at node:internal/deps/undici/undici:7516:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8) {
  cause: Error: [object Object]
      at makeNetworkError (node:internal/deps/undici/undici:6317:51)
      at httpNetworkFetch (node:internal/deps/undici/undici:7810:16)
      at async httpNetworkOrCacheFetch (node:internal/deps/undici/undici:7703:33)
      at async httpFetch (node:internal/deps/undici/undici:7557:37)
      at async schemeFetch (node:internal/deps/undici/undici:7489:18)
      at async node:internal/deps/undici/undici:7342:20
      at async mainFetch (node:internal/deps/undici/undici:7338:20) {
    [cause]: undefined
  }
}

• javascript
• reactjs
• next.js

• What version of Node.js are you using? Seems related to this issue: github./nodejs/node/issues/42804, which was fixed in Node.js 18.1.0. – juliomalves Commented May 30, 2022 at 17:41
• @juliomalves I am using 18.1.0 – Ali Gajani Commented May 30, 2022 at 19:36
• It's now 2023 and it's still an error. I just migrated now using v16.19.1 from v18.15.0 – Steven Commented Mar 15, 2023 at 11:41
• @Steven Upgrade to new node – Ali Gajani Commented Mar 15, 2023 at 21:24

5 Answers 5

Getting the same issue in node 18 version, worked for me with node v14.19.1

Yes it happens when you using node 18. hopefully someone can address this nextjs issue using the latest node version.

It seems that adding --no-experimental-fetch fixes the issue https://github./node-fetch/node-fetch/issues/1566

Create a server directory, and inside that create a module project.js to get the data from DB. Server Directory is supported by next.js. So you can create multiple methods inside one module.

In server/project.js:

import { db } from "../pages/api/db.server";
// getProjects is the method
export async function getProjects(){
    const projects = await db.Project_data.findMany();
    return JSON.stringify(projects)
}

In getServerSideProps:

import { getProjects } from "../server/"

export default function Home({projectsData}){
   const projects = JSON.parse(projectsData)
  return(
    // your JSX here and you will be able to use projects as object here
)
}

export async function getServerSideProps(context) {
const data = await getProjects();
return {
      props: {
       projectsData: data;
      },
    }
}

Using NextJS 13 and had the same issue. Downgrading Node to v16.19.1 worked for me. Npm version: 8.19.3 Node version: 16.19.1

I used NVM to change my node version. Read about it here.