😺

【Next.js】Next.js & Contentful BlogApp 【８CardItem1】

2022/11/24に公開

Next.js

Contentful

tech

【８CardItem1】

YouTube:https://youtu.be/R-E8ZDby2XM

https://youtu.be/R-E8ZDby2XM

今回は投稿されたブログのリストを
カード状に表示する部分を実装します。

背景部分の余白で白い部分が表示されていますので、
まずはこちらの調整から行います。

下記ファイルのクラスの「h-full」を「min-h-screen」に変更します。

components/Layout.js

import Head from 'next/head'
import Navbar from './Navbar'

const Layout = ({ children, title = 'My Blog App' }) => {
  return (
    <div>
      <Head>
        <title>{title}</title>
      </Head>

      <div className="w-full min-h-screen bg-gradient-to-r from-yellow-500 to-red-500">
        <Navbar />
        <main>{children}</main>

        <footer className="py-3 text-center">
          <span>&copy; My Blog App</span>
        </footer>
      </div>
    </div>
  )
}

export default Layout

pages/index.js

import Head from 'next/head'
import Image from 'next/image'
import { useEffect } from 'react'
import CardItem from '../components/CardItem'
import Hero from '../components/Hero'
import Layout from '../components/Layout'
import styles from '../styles/Home.module.css'
import { client } from '../utils/contentfulClient'

export default function Home() {
  // useEffect(() => {
  //   (async () => {
  //     const res = await client.getEntries({
  //       content_type: 'myPosts'
  //     })
  //     console.log(res.items);
  //   })()

  // }, [])

  return (
    <Layout>
      <Hero />
      <div className=" max-w-7xl flex flex-wrap justify-center mx-auto mb-3 py-2 gap-4">
        <CardItem />
        <CardItem />
        <CardItem />
        <CardItem />
      </div>
    </Layout>
  )
}

components/CardItem.js

import Image from 'next/image'

const CardItem = () => {
  return (
    <div className="w-96 md:w-64 lg:w-96 p-4 border border-solid border-slate-400 rounded-md bg-white">
      <div className="w-full h-64 relative mb-2 bg-orange-200">
        <Image
          src="/images/img_hero.png"
          alt="card-image"
          fill
          sizes="100%"
          className="object-cover"
        />
      </div>
      <h3 className="font-black text-xl sm:text-xl md:text-base lg:text-xl mb-1">
        blog title
      </h3>
      <div>
        <span>2022-11-24</span>
      </div>
    </div>
  )
}

export default CardItem

【８CardItem1】

Discussion