作成日時：2023年8月12日 01:02
更新日時：2023年8月18日 00:49
Next.js
Tutorial
HTNCodeです。
ある程度ページができたら、404エラーページを作っておこう！と思う方も多いかと思います。
今日は現在私が利用しているNext.js13.4.9で404エラーページを実装した方法をお話していこうかと思います。
よく、Webサイトを閲覧していて、404 not foundといったページを見たことがある方は多いのではないでしょうか。
その言葉通り、存在しないページであり、URLの入力間違いや、ブロークンリンクの発生などによって起こります。
Next.jsでは、そもそも存在しないページにアクセスすると、何も設定していない場合、以下のような画面が表示されます。
しかし、404エラーページを作っておくことで、以下のようなメリットを享受できるので、もれなく実装しておきましょう！
Next.js以外でも、デフォルトの404ページは非常にシンプルで、サイトのデザインやブランドイメージとは異なる場合が多いです。
カスタマイズされた404ページを用意しておくことで、ブランドとしての一貫性を保ち、
プロフェッショナルなイメージを維持することができます。
ユーザーが求めていたページが見つからない場合、 当然不満が起こります。
しかし、404ページを提供することで、その不満を軽減し、サイト内の他のページへの誘導や検索機能の提供など、
再びWebサイトを利用してもらうための道筋を示すことができ、離脱を防ぐことに役立ちます。
適切に設定された404ページは、検索エンジンに対して「このページは存在しない」と正確に伝えることができます。
これにより、検索エンジンが無駄にこのページをクロールすることを防ぎ、サイト全体のSEOパフォーマンス維持に繋がります。
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