I am trying to consume my api through code I am getting this error

object` ("[object Response]") cannot be serialized as JSON

But when I call or use this api through browser I am getting response.

here is my code =/pages/index.js

I am consuming my api like this

 console.log("-----");
  const cc = await fetch("/");
  console.log(cc, "llll");

API design

export default async (req, res) => {
  const stylesheet = await (
    await fetch("https://www.****/asset/web/css/***-base.css", {})
  ).text();
  console.log(stylesheet, "server");
  res.status(200).send(stylesheet);
};

I am getting this console value on server. but when I am calling this api through code I am getting this error

object` ("[object Response]") cannot be serialized as JSON. Please only return JSON serializable data types

I am trying to consume my api through code I am getting this error

object` ("[object Response]") cannot be serialized as JSON

But when I call or use this api through browser I am getting response.

here is my code https://codesandbox.io/s/naughty-platform-1xket?file=/pages/index.js

I am consuming my api like this

 console.log("-----");
  const cc = await fetch("https://1xket.sse.codesandbox.io/api/basecss/");
  console.log(cc, "llll");

API design

export default async (req, res) => {
  const stylesheet = await (
    await fetch("https://www.****./asset/web/css/***-base.css", {})
  ).text();
  console.log(stylesheet, "server");
  res.status(200).send(stylesheet);
};

I am getting this console value on server. but when I am calling this api through code I am getting this error

object` ("[object Response]") cannot be serialized as JSON. Please only return JSON serializable data types

• javascript
• node.js
• reactjs
• next.js
• fetch-api

3 Answers 3

That is because fetch returns a Response, after the response is returned, you need to parse the response response.json() response.text() etc. This is also an asynchronous operation, and I believe that you can't nest await statements like that.

  const response = await fetch("https://www.****./asset/web/css/***-base.css")
  const data = await response.text()

You're getting that error because you're returning a response object (cc) in your getStaticProps which is not serializable. getStaticProps and getServerSideProps only allow serializable content to be returned from them.

To fix the issue you'll first need to convert the response data to text before you can return it. You'll also need to change your props to match the ones expected in the IndexPage ponent.

// pages/index.js

export async function getStaticProps() {
    const res = await fetch("https://1xket.sse.codesandbox.io/api/basecss/");
    const stylesheet = await res.text(); // Converts response data to text

    return {
        props: {
            stylesheet // Changes prop name from `cc` to `stylesheet` to match ponent
        }
    };
}

The way I solved this for Firestore types, specifically for geopoint and timestamp types was to use some method that transforms the non-serializeable property into one.

CreatedAt: data.createdAt.toMillis(),
updatedAt: data.updatedAt.toMillis(),
coordinates: null,
latitude: Number(JSON.stringify(data?.coordinates?.latitude) ),
longitude: Number(JSON.stringify(data?.coordinates?.longitude)),

For Firestore timestamp objects, you can use the .toMillis() method. For Firestore Geopoint objects, you can first turn the location(coordinate) into 'null' and then if you need the specific latitude and longitude properties, you can use the latitude and longitude properties to pull these out and then just cast them as "Numbers".