Next.js:FetchError: invalid json response body Unexpected token < in JSON at position 0

Question

I am trying to use getStaticProps to simply make a request and then pass that data from it to a component:

But I'm getting this error:

FetchError: invalid json response body at https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR reason: Unexpected token < in JSON at position 0

import AppliancePackage from '../components/AppliancePackage.jsx';

function HomePage({ data }) {
  return (
    <>
      <AppliancePackage appliances={data} />
    </>
  );
}

export default HomePage;

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.

export async function getStaticProps() {
  // Call an external API endpoint to get data.
  // You can use any data fetching library

  var res = await fetch(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR'
  );

   var json = await res.json();

   data = JSON.stringify(json);
   console.log('data ', data);

  return {
    props: {
      data: json,
    },
  };
}

I tried to Stringify it, but that didn't work! Also I am kind of confused by the comments:

This function gets called at build time on server-side. It won't be called on client-side, so you can even do direct database queries. See the "Technical details" section.

And then as you can see there is a comment that states:

Call an external API endpoint to get posts.

But have a whole section regarding API routes in their docs

Anyone can help me what is the matter?

Update

Alexey contributed some great insight, but like I said to him I can't find in the axios docs to change the user-agent!

Answer 1

Alexey got me on the right track! Thanks my friend!

Wound up you have to do this:

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library

  var res = await axios.get(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR',
    {
      headers: {
        Accept: 'application/json, text/plain, */*',
        'User-Agent': '*',
      },
    }
  );
  var res = JSON.stringify(res.data);
  console.log('res ', res);

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      data: res,
    },
  };
}

this being adding the headers:

  headers: {
    Accept: 'application/json, text/plain, */*',
    'User-Agent': '*',
  },

And * for any User-Agent

Answer 2

I think the endpoint you're referring to is for some reason sensitive to "User-Agent".

When I tried fetching it with CURL like this, it returned some HTML response (which is not valid JSON ofcourse)

curl https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR

But this way it did work and returned JSON, just like if reached via browser:

curl -H "User-Agent: some browser" https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR  

TLDR: try adding "user-agent" header to your request.

Answer 3

For me it was .json() called for HTTP errors returning HTML in response body

Answer 4

Instead of using res.status(200).json(data) in the api file, use res.status(200).json(JSON.stringify(data)). This will eliminate JSON error in the console. This worked for me.