Next.js でカスタム Not Found ページを作る

Next.js の 404 ページって、デフォルトだとこんな感じの、すごく味気ない感じのエラー画面なんですよね

なので、すこしいじってみたいとおもいます。

カスタム 404 ページの作り方

Next.js の場合、Pages Router か、 App Router かでカスタムエラーファイルの設置位置やファイル名が異なってくるようです。

App Router の場合

今回は App Router なのでこっちです。
App Router を使ってる場合は、

app/not-found.tsx

にエラーページを作ればOK

import styles from './page.module.scss'

export default function NotFoundPage() {
  return (
    <main className={styles.is404}>
      <div className={styles['error-message-container']}>
        <div className={styles['error-message']}>
          <p className={styles['page-title']}>404 - Not Found</p>

          <p>お探しのページは見つかりませんでした。</p>
          <p>We are sorry, the page you requested cannot be found.</p>
          <p>
            <a href="/">TOP</a>
          </p>
        </div>
        <img src="/assets/img/notfoundimg.webp" alt="NOTFOUND" />
      </div>
    </main>
  )
}

で、スタイルを調整してあげれば、こんな感じでカスタムエラー画面の完成です

Pages Router の場合

ちなみに、Pages Router を使ってる場合は

pages/404.js

というふうに pages 配下に設置すれば良いみたいです。

参考

https://nextjs.org/docs/pages/building-your-application/routing/custom-error
https://maxschmitt.me/posts/nextjs-404-page-app-router