Next.js

Next.js（TypeScript）でカスタム404エラーページを作成する

Next.jsを使用すると、簡単にカスタム404エラーページを作成できます。このガイドでは、Next.jsプロジェクトにカスタム404エラーページを追加する方法をステップバイステップで説明します

Next.jsを使用すると、簡単にカスタム404エラーページを作成できます。このガイドでは、Next.jsプロジェクトにカスタム404エラーページを追加する方法をステップバイステップで説明します。

#1. Next.jsプロジェクトのセットアップ

まず、Next.jsのプロジェクトが既にセットアップされていることを確認してください。まだセットアップしていない場合は、以下のコマンドを使用して新しいプロジェクトを作成します。

npx create-next-app@latest my-next-app
cd my-next-app

このチュートリアルでは、TypeScriptを使用しますが、JavaScriptの場合もほぼ同様の手順です。

#2. 404.tsxファイルの作成

Next.jsでは、pagesディレクトリに404.tsxという名前のファイルを作成することで、カスタム404エラーページを定義できます。pagesディレクトリに移動し、以下の内容で404.tsxファイルを作成します。

// pages/404.tsx
import React from 'react';
import Link from 'next/link';
import styles from './404.module.css';

const Custom404 = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>404 - ページが見つかりません</h1>
      <p className={styles.description}>
        お探しのページは存在しないか、移動した可能性があります。
      </p>
      <Link href="/">
        <a className={styles.homeLink}>ホームページに戻る</a>
      </Link>
    </div>
  );
};

export default Custom404;

#3. スタイルの追加

次に、404.tsxに適用するスタイルを定義します。pagesディレクトリに404.module.cssというスタイルシートを作成し、以下の内容を追加します。

/* pages/404.module.css */
.container {
  text-align: center;
  padding: 100px 20px;
}

.title {
  font-size: 3rem;
  margin-bottom: 20px;
}

.description {
  font-size: 1.5rem;
  margin-bottom: 40px;
}

.homeLink {
  font-size: 1.2rem;
  color: #0070f3;
  text-decoration: underline;
}

#4. カスタム404ページの確認

以上で、カスタム404エラーページの作成は完了です。ローカル開発サーバーを起動して動作を確認します。

npm run dev

ブラウザで存在しないページ（例: http://localhost:3000/nonexistent-page）にアクセスして、カスタム404ページが表示されることを確認してください。

#まとめ

このガイドでは、Next.jsでカスタム404エラーページを作成する方法を学びました。カスタム404ページを作成することで、ユーザーにより良いエクスペリエンスを提供し、サイトの一貫性を保つことができます。必要に応じてスタイルやコンテンツをカスタマイズして、さらに魅力的な404ページを作成してみてください。

タグ一覧