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 .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(
    '.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!

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!

• javascript
• node.js
• reactjs
• next.js

5 Answers 5

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

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.

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

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.

i think the data is not been fetch from the end that why. i face same problems i restarted my system and network and it works perfectly back