kklai/index.js

## index.js
import Navbar from '../components/navbar.components'
import Head from 'next/head'
import topstory from "../styles/topstory.module.scss"
import Link from 'next/link'
import LocationOnIcon from '@mui/icons-material/LocationOn';

export default function Home({story}) {

  console.log(story.data)
  return (
      <div>
      <Head>
        <title>Behind The Lens | Untold Stories | Premiars</title>
      </Head>
      <Navbar />
        <div>
          {story.data.map((item,index) => {
            return (
              <div className={topstory.topimgContainer}>
                  <Link href="/">
                  <a>
                      <img src="../images/demo/demo1.jpg" alt="TopStory" className={topstory.topimg} />
                      <div className={topstory.toptextcontainer}>
                          <h1 className={topstory.toptitletext}>{item.attributes.Title}</h1>
                          <div className='flex justify-center pt-1 pb-3'>
                              <p className={topstory.toplocation}><LocationOnIcon />Hong Kong</p>
                              <img src="../images/demo/vyavatar.jpeg" alt="vyavatr" className={topstory.topstoryavatar}/>
                              <p className={topstory.topbyline}>{item.attributes.author}</p>
                          </div>
                      </div>
                  </a>
                  </Link>
              </div>
            )
          })}
          </div>
      </div>
  )
}

export async function getServerSideProps(){
  const res = await fetch( `http://127.0.0.1:1337/api/stories`)
  const data = await res.json()

  return {
    props: {
      story: data
    }
  }
}
	import Navbar from '../components/navbar.components'
	import Head from 'next/head'
	import topstory from "../styles/topstory.module.scss"
	import Link from 'next/link'
	import LocationOnIcon from '@mui/icons-material/LocationOn';

	export default function Home({story}) {

	console.log(story.data)
	return (
	<div>
	<Head>
	<title>Behind The Lens \| Untold Stories \| Premiars</title>
	</Head>
	<Navbar />
	<div>
	{story.data.map((item,index) => {
	return (
	<div className={topstory.topimgContainer}>
	<Link href="/">
	<a>
	<img src="../images/demo/demo1.jpg" alt="TopStory" className={topstory.topimg} />
	<div className={topstory.toptextcontainer}>
	<h1 className={topstory.toptitletext}>{item.attributes.Title}</h1>
	<div className='flex justify-center pt-1 pb-3'>
	<p className={topstory.toplocation}><LocationOnIcon />Hong Kong</p>
	<img src="../images/demo/vyavatar.jpeg" alt="vyavatr" className={topstory.topstoryavatar}/>
	<p className={topstory.topbyline}>{item.attributes.author}</p>
	</div>
	</div>
	</a>
	</Link>
	</div>
	)
	})}
	</div>
	</div>
	)
	}

	export async function getServerSideProps(){
	const res = await fetch( `http://127.0.0.1:1337/api/stories`)
	const data = await res.json()

	return {
	props: {
	story: data
	}
	}
	}