Next.js JSON Retrieval - JSON Objects Issue

Question

I am working on a simple crypto price tracker using coingecko API. My current code will not access any of the JSON objects from the API link and I get no errors or warnings indicating what the issue is: https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20ripple&order=market_cap_desc&per_page=100&page=1&sparkline=false

However, for testing purposes if I use this API link from jsonplaceholder, it works absolutely fine: https://jsonplaceholder.typicode.com/users

This is my code:

export const getStaticPaths = async () => {

//Does not work with this json url
// const res = await fetch('https://jsonplaceholder.typicode.com/users')

const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20ripple&order=market_cap_desc&per_page=100&page=1&sparkline=false')
const data = await res.json();
const paths = data.map(coin => {
return {
  params: {id: coin.id}
}
})

return {
    paths,
    fallback: false
    }
}

export const getStaticProps = async (context) => {
const id = context.params.id; 

//Does not work with this json url
// const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id )

const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=' + id + '%2C%20&order=market_cap_desc&per_page=100&page=1&sparkline=false/')

const data = await res.json();
console.log(data)

return {
    props: {coin: data}
  }
}

const Details = ({ coin }) => {
return(
   
     <div>
      <h1>Coin Page</h1>
      <h2>{ coin.name }</h2>
      <h2>{ coin.symbol }</h2>
    </div>
   )
}

export default Details;

As I have said I get no errors or warnings so any hep on troubleshooting this would be appreciated, thank you

Answer 1

I found some problems in your code, you can check it out this version that works fine.

Here is the code sandbox that I used to reproduce your situation: https://codesandbox.io/s/amazing-star-55pyl?file=/pages/coins/%5Bid%5D.js:0-1221

You have to visit the url /bitcoin for example for it to work.

First of all I removed the "%2C%20" from the url because that represents and space and a comma and that's usefull when you have a list of currencies but not in this case.

Lastly in your component you get an array of coins and you should reference the first one (there is only one item).

export const getStaticPaths = async () => {
  //Does not work with this json url
  // const res = await fetch('https://jsonplaceholder.typicode.com/users')

  const res = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2C%20ethereum%2C%20ripple&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  );

  const data = await res.json();
  const paths = data.map((coin) => {
    return {
      params: { id: coin.id.toString() }
    };
  });

  return {
    paths,
    fallback: false
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;

  //Does not work with this json url
  // const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id )

  const res = await fetch(
    "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=" +
      id +
      "&order=market_cap_desc&per_page=100&page=1&sparkline=false"
  );

  const data = await res.json();

  return {
    props: { coin: data }
  };
};

const Details = ({ coin }) => {
  console.log(coin);

  return (
    <div>
      <h1>Coin Page</h1>
      <h2>{coin[0].name}</h2>
      <h2>{coin[0].symbol}</h2>
    </div>
  );
};

export default Details;