Next.js 13 - Fetch Failed Error. How do I resolve this?

Question

I was trying the Next 13 beta version, and I faced a strange problem. What I am trying to do is, fetch data on the server side and display them on the page. However, the "fetch" operation fails on the server side. Below is the code for the Next.js page. It falls under the 'app' directory, as 'app/pageName/page.js'

import React from 'react'

async function callApi() {
  const data = await fetch('https://api-psepeti.herokuapp.com/api/items/?search=yil');
  return data.json();
}

export default async function Page() {
  const data = await callApi();
  return (
    <main>
        {data.results && data.results.map((product, index) => (
          <h1>{product.title}</h1>
        ))}
    </main>
  )
}

Click to see Error Message. (UND_ERR_CONNECT_TIMEOUT)

Click to see API response (Django REST)

Click to see Next 13 Doc

Note: The fetch operation fails after ~ 10 seconds.

What I did:

I tried Axios, but it also fails.
I tried adding 'enableUndici: true' to the next config file. (Fails)
I tried other mock APIs, some work some don't. (Weird)
They all work normally on the client side.
They all work normally in the Next 12.
They all work normally on any other React app.

Versions:

node 18.12.0
next 13.1.0
react 18.2.0
react-dom 18.2.0
npm 9.2.0

OS: M1 IOS (Ventura 13.1)

Next config.js:

const nextConfig = {
  experimental: {
    appDir: true,
    enableUndici: true
  },
}

module.exports = nextConfig

PS: The tricky part is everything works well with Next 12, but not Next 13. When we do the same operations in Next12 using getStaticProps and getServerSideProps, it works just fine.

Yes: "next": "13.0.6", "react": "18.2.0", "react-dom": "18.2.0". — Youssouf Oumar, Dec 14 '22 at 09:01
@yousoumar I use the same versions. I tried another computer but had the same error. When I try a different API service, this code works. So the problem is not about the code. At the same time, when I call the same API endpoint on the client side, it also works. So, the problem is not about the API service as well. I am so confused. — Berk Cohadar, Dec 15 '22 at 00:40
I have the same problem and everything is up to date, this is weird — Thielicious, Dec 31 '22 at 03:26
did you add any content security policy in your next.config? — Ali Sattarzadeh, Jan 30 '23 at 05:42

score 2 · Answer 1 · answered Apr 20 '23 at 19:34

2

i think you might need to wait for .json() as well:

    async function callApi() {
      const data = await fetch('https://api-psepeti.herokuapp.com/api/items/?search=yil');
      let result = await data.json();
      return resut;
    }

i hop it works

answered Apr 20 '23 at 19:34

shahrooz bazrafshan

545
4
17

faebster · Answer 2 · 2023-06-05T13:30:48.103

0

The error should be ok, tried your request in the browser:

(Update: here was the old server url which you provided and wasn't available for me, meanwhile my browser claims it's a 'security risk' so I completely removed that link here...)

returns "unable to connect" which means there should be an error.

In general you have to wrap all the await with a try/catch to avoid unhandled errors, will give you a bit more accurate information I assume.

try{
  /* await here */
} catch(error: any|unknown){
  /* handle error */
}

additionally: I get that dev's like axio, however fetch is already integrated, so I try to avoid adding another library doing the same like an existing one.

edited Jun 05 '23 at 13:30

answered Mar 31 '23 at 13:44

faebster

727
7
13

Hi @faebster, the above domain was reachable at the time of this question. But then we moved our server to another domain. However, the error still seems to be there for some reason. The tricky part is everything works well with Next 12. When we update to 13, server-side data fetches just don't work. More specifically, we do the same operations using `getStaticProps` and `getServerSideProps`, it works just fine. PS: I updated the domain please take another look. – Berk Cohadar Apr 20 '23 at 18:27
@BerkCohadar sorry for late reply. I assume it's been solved meanwhile? – faebster Jun 05 '23 at 13:29
@BerkCohadar is your fetch code inside a app/page.tsx file? if you use it outside it will use native fetch which is not Next fetch... same error when adding `{ cache: "no-store" }` as 2nd argument in .fetch ?? However if so I'd expect a Hydration error. But better to ask than to assume (sorry just seen it is a app page. I leave the comment for others) – faebster Jul 01 '23 at 20:46
there are many reasons why a fetch could fail, one workaround could be to put the fetch into app/api directory and fetch server-side. Then you call your api method to get the results, it's anyway cleaner IMO, you could e.g. fail only client-side due to CORS when using SSR as it will fetch server&clientside. you can check this by using isOnServer hook and SSRProvider from react-area (Adobe). The error you receive is just not good enough, so first approach check network tab for details.ry it in app/api/ hen cisOnServk if it works either server or cliemaybe we can get closer to the real issue – faebster Jul 01 '23 at 20:53

Next.js 13 - Fetch Failed Error. How do I resolve this?

2 Answers2