【Next.js】Next.js & Contentful BlogApp 【１１PostDetailsPage２】

【１１PostDetailsPage２】

YouTube:https://youtu.be/RB55jabH-GE

https://youtu.be/RB55jabH-GE

今回はブログ詳細ページに「SSG」「ISR」の設定を行います。

pages/posts/[slug].js

import Image from 'next/image'
import Layout from '../../components/Layout'
import { client } from '../../utils/contentfulClient'

export const getStaticPaths = async () => {
  const res = await client.getEntries({
    content_type: 'myPosts',
  })
  const paths = res.items.map((item) => {
    return {
      params: { slug: item.fields.slug },
    }
  })

  return {
    paths,
    fallback: 'blocking',
  }
}

export const getStaticProps = async ({ params }) => {
  const { items } = await client.getEntries({
    content_type: 'myPosts',
    'fields.slug': params.slug,
  })

  if (!items.length) {
    return {
      notFound: true,
    }
  }

  return {
    props: { item: items[0] },
    revalidate: 10,
  }
}

const PostDetailsPage = ({ item }) => {
  return (
    <Layout title="post-details">
      <div className="w-full">
        <div className="max-w-6xl flex flex-wrap justify-between items-center mx-auto py-6 px-5 gap-3">
          <div>
            <h1 className="font-bold text-3xl sm:text-4xl md:text-4xl lg:text-5xl py-3 mb-1">
              My Blog App
            </h1>
            <p className="font-bold text-2xl mb-2">Web Frontend & Backend</p>
          </div>
          <div>
            <Image
              src="/images/img_hero.png"
              alt="main_visual"
              width={500}
              height={500}
              className="rounded"
            />
          </div>
        </div>
      </div>
      <div className="max-w-6xl mx-auto p-5">blog text</div>
    </Layout>
  )
}

export default PostDetailsPage