3

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
  }
}
Nil
  • 1,209
  • 9
  • 20
Ali Gajani
  • 14,762
  • 12
  • 59
  • 100

5 Answers5

2

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

Somit Garhewal
  • 21
  • 2
1

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

Yudi Yohanes Septian Gotama
  • 119
  • 1
  • 13
1

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

Juan Gabriel González Hortua
  • 11
  • 1
1

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;
      },
    }
}
ecraig12345
  • 2,328
  • 1
  • 19
  • 26
user21042922
  • 11
  • 1
0

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.

S J
  • 440
  • 3
  • 12