Reorganizar la vista de podcasts

¿cómo se puede observar la data que retorna un api en next?
Me refiero a ver la respuesta directa del api similar a cómo se ve en el network de chrome cuando se crea una app con create-reacat-app, es decir, allá puedo ver el api consumido y la data que llega, y supongo que como en next ya está el server-side-rendering la forma es distinta, pero no se cómo hacerlo

RETO DONE

PodcastList

import Link from 'next/link';

const PodcastList = ({ audioClips }) => {
  return (
    <>
      {audioClips.map((clip, index) => (
        <div key={index}>
          <Link href={`/podcast?id=${clip.id}`}>
            <a className='podcast'>
              <h3>{clip.title}</h3>
              <div className='meta'>
                {Math.ceil(clip.duration / 60)} minutes
              </div>
            </a>
          </Link>
        </div>
      ))}
      <style jsx>{`
        .podcast {
          display: block;
          text-decoration: none;
          color: #333;
          padding: 15px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.2);
          cursor: pointer;
        }
        .podcast:hover {
          color: #000;
        }
        .podcast h3 {
          margin: 0;
        }
        .podcast .meta {
          color: #666;
          margin-top: 0.5em;
          font-size: 0.8em;
        }
      `}</style>
    </>
  );
};
export default PodcastList;

channel.js

import 'isomorphic-fetch';
import ChannelGrid from '../components/ChannelGrid';
import Layout from '../components/Layout';
import PodcastList from '../components/PodcastList';

const Channel = ({ channel, audioClips, childChannels }) => {
  return (
    <>
      <Layout title={channel.title}>
        <h1>{channel.title}</h1>
        {childChannels.length > 0 && (
          <div>
            <h2>Series</h2>
            <hr />
            <ChannelGrid channels={childChannels} title='Series' />
          </div>
        )}
        <h2>Latest Podcasts</h2> <hr />
        <PodcastList audioClips={audioClips} />
      </Layout>
      <style jsx>{`
        h1 {
          left: 0;
          margin: 0;
          width: 100%;
          padding-left: 5px;
          font-weight: 800;
          text-align: center;
          padding-top: 15px;
          font-size: 3em;
        }
        h2 {
          padding: 5px;
          font-size: 1.4em;
          font-weight: 600;
          margin: 0;
          text-align: left;
        }
        hr {
          height: 1px;
          background-color: #ccc;
          border: none;
        }
      `}</style>
    </>
  );
};

export async function getServerSideProps({ query }) {
  console.log(query);
  const channelID = query.id;
  let [reqChannel, reqAudio, reqChildChannels] = await Promise.all([
    fetch(`https://api.audioboom.com/channels/${channelID}`),
    fetch(`https://api.audioboom.com/channels/${channelID}/audio_clips`),
    fetch(`https://api.audioboom.com/channels/${channelID}/child_channels`),
  ]);
  let responseChannel = await reqChannel.json();
  let channel = responseChannel.body.channel;
  let responseAudio = await reqAudio.json();
  let audioClips = responseAudio.body.audio_clips;
  let responseChildChannels = await reqChildChannels.json();
  let childChannels = responseChildChannels.body.channels;

  return { props: { channel, audioClips, childChannels } };
}
export default Channel;

Reto cumplido…

import Layout from '../components/Layout'
import ChannelGrid from '../components/ChannelGrid'
import PodcastList from '../components/PodcastList'

export default class extends React.Component {

  static async getInitialProps({ query }) {
    let idChannel = query.id

    let [reqChannel, reqSeries, reqAudios] = await Promise.all([
      fetch(`https://api.audioboom.com/channels/${idChannel}`),
      fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`),
      fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`)
    ])

    let dataChannel = await reqChannel.json()
    let channel = dataChannel.body.channel

    let dataAudios = await reqAudios.json()
    let audioClips = dataAudios.body.audio_clips

    let dataSeries = await reqSeries.json()
    let series = dataSeries.body.channels

    return { channel, audioClips, series }
  }

  render() {
    const { channel, audioClips, series } = this.props

    return <Layout title={channel.title}>

      <div className="banner" style={{ backgroundImage: `url(${channel.urls.banner_image.original})` }} />

      {series.length > 0 &&
        <React.Fragment>
          <h1>{channel.title}</h1>
          <ChannelGrid channels={series} />
        </React.Fragment>
      }

      <PodcastList audioClips={audioClips} />

      <style jsx>{`
        .banner {
          width: 100%;
          padding-bottom: 25%;
          background-position: 50% 50%;
          background-size: cover;
          background-color: #aaa;
        }

        h1 {
          font-weight: 600;
          padding: 15px;
        }
      `}</style>
    </Layout>
  }
}

_Reto cumplido!! _ 💪