🙄

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

2022/11/28に公開

Next.js

Contentful

tech

【１２PostDetailsPage３】

YouTube:https://youtu.be/-CYTVQxBZH8

https://youtu.be/-CYTVQxBZH8

今回は前回取得した「item」をダミーテキストと差し替えて、
各ブログ記事の内容を反映する部分を実装します。

ブログの本文はリッチテキストエディターを使用しますので、
データを反映させるためには下記のライブラリが必要になります。

npm install @contentful/rich-text-react-renderer

package.json

  "dependencies": {
    "@contentful/rich-text-react-renderer": "^15.12.1",
  },

pages/posts/[slug].js

import Image from 'next/image'
import Layout from '../../components/Layout'
import { client } from '../../utils/contentfulClient'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

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 }) => {
  console.log(item.fields.content)
  return (
    <Layout title={item.fields.slug}>
      <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">
              {item.fields.title}
            </h1>
            <p className="font-bold text-2xl mb-2">
              {item.sys.createdAt.substring(0, 10)}
            </p>
          </div>
          <div>
            <Image
              src={`https:${item.fields.image.fields.file.url}`}
              alt={item.fields.image.fields.description}
              width={500}
              height={500}
              className="rounded"
            />
          </div>
        </div>
      </div>
      <div className="max-w-6xl mx-auto p-5">
        {documentToReactComponents(item.fields.content)}
      </div>
    </Layout>
  )
}

export default PostDetailsPage

【１２PostDetailsPage３】

Discussion