【Next.js】Next.js & Contentful BlogApp 【１４Build Test & Sharp】

【１４Build Test & Sharp】

YouTube:https://youtu.be/CWZo8SQjV60

https://youtu.be/CWZo8SQjV60

今回はアプリをビルドして、デプロイ前のテストを行います。

次回の動画でデプロイを行うのですが、
デプロイするには「git」がインストールされていること、
「github」のアカウントと連携していること、
リポジトリを作成して、今回作成したデータを
githubにプッシュできることが必要になります。

まだこちらの準備がお済でない方は、
この動画が終わった後に準備をお願いいたします。

こちらのサイトが画像付きで分かりやすく説明してありましたので、
参考用にご紹介させていただきました。

https://prog-8.com/docs/git-env-win

ここからはビルドの解説になります。
まずはビルドコマンドを実行して、
ビルドしたアプリを起動してみましょう。

ビルドコマンド
npm run build

ビルドしたアプリの起動コマンド
npm run start

こちらはImageコンポーネントで使用している
画像の最適化処理を補強するライブラリになります。

警告文が気になる方はインストールしてみてください。

https://www.npmjs.com/package/sharp

npm i sharp

package.json

  "dependencies": {
    "sharp": "^0.31.2"
  },

こちらはコンソールの表示が残っていましたので、
「const PostDetailsPage」の下の「console.log」を削除しました。

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'
import { options } from '../../lib/richTextOptions'

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={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, options)}
      </div>
    </Layout>
  )
}

export default PostDetailsPage