sos-nextjs/pages/index.js

import React from 'react'

import Hero from '~/components/hero'
import Card from '~/components/card'

Index.getInitialProps = async ({ctx})=>{
  const {data: items} = await ctx.axios.get('/api/items')
  return {items}
}

export default function Index({items}){
  return (
    <>
      <Hero/>
      <div className="cardContainer">
        {items.map(item=>
          <Card key={item.uuid} item={item}/>
        )}
      </div>
    </>
  )
}