angrybeanie-front-end/pages/index.js

import Layout from "../components/main"
import LatestEpisodes from "../components/latestepisodes"
import Link from 'next/link'
import getConfig from 'next/config'

export async function getServerSideProps(context) {
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
  const res = await fetch(serverRuntimeConfig.base_path +`/api/collections/1`)
  const artdata = await res.json()

  const epres = await fetch(serverRuntimeConfig.base_path + '/api/podcasts/episodes/latest/0/3')
  const epdata = await epres.json()

  const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
  const secdata = await secres.json()

  const pagedata = {'title': 'Angry Beanie'}
  
  return {
      props: { articles: artdata, sections : secdata, pagedata, episodedata: epdata, config: serverRuntimeConfig}, // will be passed to the page component as props
  }
}

function HomePage (props) {
    return (<Layout sections={props.sections} pagedata={props.pagedata}>
      {props.articles.articles.map((article) =>  (
        <div>
          <h1><Link href="/news/[slug]" as={"/news/" + article.slug}><a>{article.title}</a></Link></h1>
          <div dangerouslySetInnerHTML={{ __html: article.lead}} ></div>
        </div>
      ))}
      <hr />
      <LatestEpisodes episodedata={props.episodedata} config={props.config}></LatestEpisodes>
    </Layout>);
}
  
export default HomePage