Zenn
🙄

【Next.js】Next.js & Contentful BlogApp 【５Layout Component】

2022/11/21に公開
Next.js
Contentful
tech

【５Layout Component】

YouTube: https://youtu.be/UClNQKckvx4

https://youtu.be/UClNQKckvx4

今回はレイアウトコンポーネントを作成します。

最初にVSコードの拡張機能で「Tailwind CSS IntelliSense」が
インストールされているかを確認してください。

components/Layout.js
import Head from 'next/head'

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

      <div className="w-full h-full bg-gradient-to-r from-yellow-500 to-red-500">
        <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 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>
      <h1 className={styles.title}>
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </h1>
    </Layout>
  )
}

Discussion