はじめに

HTNCodeです。

ある程度ページができたら、404エラーページを作っておこう！と思う方も多いかと思います。

今日は現在私が利用しているNext.js13.4.9で404エラーページを実装した方法をお話していこうかと思います。

404エラーページとは？

よく、Webサイトを閲覧していて、404 not foundといったページを見たことがある方は多いのではないでしょうか。

その言葉通り、存在しないページであり、URLの入力間違いや、ブロークンリンクの発生などによって起こります。

なぜ404エラーページを作るのか？

Next.jsでは、そもそも存在しないページにアクセスすると、何も設定していない場合、以下のような画面が表示されます。

しかし、404エラーページを作っておくことで、以下のようなメリットを享受できるので、もれなく実装しておきましょう！

1. ブランドイメージを維持できる

Next.js以外でも、デフォルトの404ページは非常にシンプルで、サイトのデザインやブランドイメージとは異なる場合が多いです。

カスタマイズされた404ページを用意しておくことで、ブランドとしての一貫性を保ち、

プロフェッショナルなイメージを維持することができます。

2. UX向上

ユーザーが求めていたページが見つからない場合、当然不満が起こります。

しかし、404ページを提供することで、その不満を軽減し、サイト内の他のページへの誘導や検索機能の提供など、

再びWebサイトを利用してもらうための道筋を示すことができ、離脱を防ぐことに役立ちます。

3. SEO対策

適切に設定された404ページは、検索エンジンに対して「このページは存在しない」と正確に伝えることができます。

これにより、検索エンジンが無駄にこのページをクロールすることを防ぎ、サイト全体のSEOパフォーマンス維持に繋がります。

4. 問題発生に気づきやすくなる

404エラーが多発しているページやリンクを監視することで、サイト内のブロークンリンクや

他の問題点を早期に発見することができるようになり、迅速に修正を行うことで機会損失を防ぐことができます。

実装

実装については、公式ドキュメントに方法が載っています。

■Next.js Docs _not-found.js

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

not-found.js（今回はnot-found.tsxファイルで作りました）を作成します。

import React from "react";
import "./styles/globals.css";
import styles from "@/app/not_found.module.css";

const NotFound: React.FC = () => {
  return (
    <div className={styles.NotFound}>
      <h2>404 - Not Found</h2>
      <p>存在しないページのURLです。</p>
      <div className={styles.homeBtnArea}>
        <a href="/">HOMEへ戻る</a>
      </div>
    </div>
  );
};

export default NotFound;

以上です。試しに「npm run dev」で開発サーバーを立ち上げ、正しくカスタムした404ページが表示されるかを確認してみてください。

あとはビルドしてなんなりとお好きにどうぞ！

おわりに

いかがでしたか？.htaccessでホームにリダイレクトさせたりといった方法もありますが、使い方によっては、

「？？？このURLにアクセスしたいのに、なんかホームに戻っちゃう！」といった混乱を招くケースもあります。

SEO対策等にも有効ですので、ぜひカスタムした404ページを実装してみてください。

それではまた！

HTNCode