Chapter 21

404ページ

Gatsbyでは、存在しないページへのアクセスがあった際に自動的に404ページにルーティングしてくれます。
404ページの内容はsrc/pages/404.jsに記載することで反映されます。

コーディング

ページの作成

画像はご自身でご用意ください。本書と同じ画像を利用する場合はこちらよりダウンロードしてください。

// src/pages/404.js
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import NOT_FOUND_IMG from "../../static/404.jpg"
import "../styles/404.css"

export default function NotFound() {
    return (
        <Layout>
            <SEO title="404 Not Found" description="ページが見つかりません" />
            <div className="not-found-message">
                <h1>404 Not Found</h1>
                <Link to="/">トップページへ</Link>
            </div>
            <img src={NOT_FOUND_IMG} className="not-found-image" alt="not found" />
        </Layout>
    )
}

スタイリング

/* src/styles/404.css */
.not-found-message {
  margin: 40px auto;
  text-align: center;
}

.not-found-image {
  width: 100%;
  height: auto;
  margin: 40px auto;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px;
}

404へのルーティング確認

gatsby developの開発サーバーを立ち上げた状態では、無効なURLへアクセスしても以下のようにデバッグ用のページを表示します。
404ページへのルーティングは本番用のビルドを行いサーバーを立ち上げたときのみ機能します。
notfound-debug.png

gatsby developは一度停止し、以下のコマンドで本番用のビルドを行い、サーバーを立ち上げます。
立ち上げたあと、localhost:9000/存在しないパスへアクセスすると404ページが表示されるのが確認できます。

$ gatsby build

$ gatsby serve

表示結果

notfound.png