🚀

【Next.js】Next.js & Contentful BlogApp 【１６Custom 404 Page】

2022/12/02に公開

Next.js

Contentful

tech

【１６Custom 404 Page】

YouTube:https://youtu.be/Jsj8sytYPr8

https://youtu.be/Jsj8sytYPr8

今回は404NotFoundのページのカスタマイズについて解説します。
pagesの直下に「404.js」というファイルを作成します。
こちらのファイル名は「404.js」に合わせることが必要です。

pages/404.js

import Link from 'next/link'
import Layout from '../components/Layout'

const Custom404 = () => {
  return (
    <Layout>
      <div className="h-screen flex flex-col justify-center items-center gap-4 text-white">
        <h1 className="text-7xl font-black">404</h1>
        <p className="text-5xl font-black">Not Found</p>
        <Link href="/" className="font-black">
          Back to Home
        </Link>
      </div>
    </Layout>
  )
}

export default Custom404

そしてこちらの作成ができましたら、
前回デプロイしたアプリに今回の修正を反映します。

まずは「vercel」のダッシュボードから
前回デプロイしたアプリの画面を表示しておきます。

次に今回作成・修正したファイルを前回解説した
VSコードのやり方で「commit」します。

最後にターミナルに「git push」のコマンドを入力して、
githubのリポジトリにプッシュします。

git push

プッシュをしますと自動的にデプロイが実行されます。

デプロイの様子はダッシュボードのムネイル画像の下の欄に表示されます。

【１６Custom 404 Page】

Discussion