Next.js - Axios - API

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
// import fetch from 'isomorphic-unfetch'
import axios from 'axios'

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.data.map(({show}) => (
        <li key={show.id}>
          <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = 
  
  async function() {
    // fetch('https://api.tvmaze.com/search/shows?q=batman')
    // const data = await res.json()
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman')
  const data = await res.data

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    data: data
  }
}

export default Index

Highlight and format

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
// import fetch from 'isomorphic-unfetch'
import axios from 'axios'

const Index = (props) => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.data.map(({show}) => (
        <li key={show.id}>
          <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = 
  
  async function() {
    // fetch('https://api.tvmaze.com/search/shows?q=batman')
    // const data = await res.json()
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman')
  const data = await res.data

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    data: data
  }
}

export default Index

Original post

export default class extends React.Component {
  static async getInitialProps({ query }) {
    let idItem = query.id
    let req = await fetch(`http://localhost:3004/api/v1/items/${idItem}`)
    //data
    let { body: { channel } } = await req.json()
    //return { item: item }
    return { channel }
  }

  render() {
    const { channel } = this.props

    return (
      <h1>{ channel.title }</h1>
    )
  }
}

^^ Original Comment ^^

let [ res1, res2 ] = await Promise.all([
	fetch(url_1),
	fetch(url_2)
]);

^^ Original Comment ^^