🕌

【Next.js】Next.js & Contentful BlogApp 【７Hero Component】

2022/11/23に公開

Next.js

Contentful

tech

【７Hero Component】

YouTube:https://youtu.be/jZzrlRYUtqA

https://youtu.be/jZzrlRYUtqA

今回はヒーローセクションの作成を行います。

画像はお好きなものを使用していただいて大丈夫ですが、
動画と同じものを使う場合は、こちらからダウンロードをお願いします。

こちらはアカウントの作成は必要ですが、
フリーの素材になります。

components/Hero.js

import Image from 'next/image'

const Hero = () => {
  return (
    <div className="w-full">
      <div className="max-w-7xl flex flex-wrap justify-around items-center mx-auto py-6 px-3 gap-3">
        <div>
          <h1 className="font-bold text-8xl pb-5 mb-1">My Blog App</h1>
          <p className="font-bold text-5xl mb-4">Next.js & Contentful</p>
          <p className="font-bold text-2xl mb-2">Web Frontend & Backend</p>
        </div>
        <div>
          <Image
            src="/images/img_hero.png"
            alt="main_visual"
            width={600}
            height={600}
          />
        </div>
      </div>
    </div>
  )
}

export default Hero

pages/index.js

import Head from 'next/head'
import Image from 'next/image'
import { useEffect } from 'react'
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 />
      <h1 className={styles.title}>
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </h1>
    </Layout>
  )
}

【７Hero Component】

Discussion