404ページ

存在しないURLへアクセスしたときに表示するページを作ります。ministaでは通常のページと同じように404.htmlを生成し、公開先で404ページとして配信するよう設定します。

Table of Contents

• ページを作る
• 構成と出力を確認する
• 表示を確認する
• 公開先で404ページを設定する

ページを作る

src/pages/404.tsxを作成します。pluginSsg()を設定した構成であれば、追加のプラグインは不要です。

import type { Metadata } from "minista/types"

export const metadata: Metadata = { title: "ページが見つかりません" }

export default function NotFound() {
  return (
    <>
      <h1>ページが見つかりません</h1>
      <p>URLが変更されたか、ページが削除された可能性があります。</p>
      <a href="/">トップページへ戻る</a>
    </>
  )
}

トップページへのリンクは、サイトの公開先に合わせます。/site/へ公開する場合は、href="/site/"に変更してください。タイトルをHTMLのheadへ反映する方法は、レイアウトで紹介します。

構成と出力を確認する

既存のページに404.tsxを追加すると、ビルド結果に404.htmlが加わります。以下は関係するファイルだけを示しています。

src/pages/
├── index.tsx
├── about.md
└── 404.tsx

dist/
├── index.html
├── about.html
└── 404.html

Markdownで作る場合は404.md、MDXなら404.mdxでも同じファイル名で出力されます。同じURLのページが競合するため、いずれか一つを使用します。

表示を確認する

npm run devで開発サーバーを起動し、/404を開いて内容を確認します。ビルド後はnpm run previewで/404.htmlを確認できます。

404ページを直接開く確認と、存在しないURLで表示される確認は別です。存在しないURLに対する表示とHTTPステータスは、公開先で確認します。

公開先で404ページを設定する

dist/の中身を公開し、存在しないURLへの応答に404.htmlを使うよう、ホスティング側で設定します。404.htmlという名前だけで自動的に利用するサービスもあります。公開先の設定方法を確認してください。

公開後に存在しないURLへアクセスし、作成したページが表示されることと、HTTPステータスが404であることを確認します。

404ページは/news/missing/など、さまざまな階層のURLで表示されます。トップページやアセットへの相対参照は、そのURLから解決されるためリンク切れになることがあります。共通の404ページには、base: "/"やbase: "/site/"のように公開先を指定する構成が適しています。詳しくはビルドとデプロイを参照してください。

次はページへデータを渡すで、metadataとgetStaticData()からpropsを渡す方法を紹介します。