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

Solution 1:

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.****.com/asset/web/css/***-base.css")
  const data = await response.text()

Solution 2:

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 component.

// 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 component
        }
    };
}