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://marketplace-api.scistoneprojects.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

Machine: Mac Mini M1 (Ventura 13.1)

Answer 1

Instead of single inverted comma for api call, use backtick.