Next.jsで404ページをカスタマイズする方法

Webサイトを構築する際、存在しないページにアクセスしたときに表示される「404ページ」は、ユーザー体験や信頼性に大きく影響します。本記事では、Next.jsのSSG（Static Site Generation）とApp Routerの構成を前提に、/src/pages/404.tsxから/src/app/error/page.tsxへリダイレクトすることで、カスタマイズされたエラーページを表示する方法を紹介します。

404.tsx から error/page.tsx へリダイレクト

Next.jsでは、SSGでエクスポートされたサイトに404ページを含めるために、pages/404.tsxの設置が必要です。しかし、UIをApp Router側のページで統一したい場合、以下のようにリダイレクトを実装できます。

1import { useEffect } from 'react';
2import { useRouter } from 'next/router';
3
4export default function Custom404() {
5  const router = useRouter();
6
7  useEffect(() => {
8    router.replace('/error');
9  }, [router]);
10
11  return null;
12}
13

このコードでは、404.tsxにアクセスされたとき、即座に/errorページへリダイレクトされます。

/app/error/page.tsx の作成

リダイレクト先となる/app/error/page.tsxには、404エラーを表示するための任意のUIを実装します。

1export default function ErrorPage() {
2  return (
3    <div style={{ padding: '2rem', textAlign: 'center' }}>
4      <h1>ページが見つかりません</h1>
5      <p>指定されたURLのページは存在しません。</p>
6    </div>
7  );
8}
9

補足：なぜこのような構成が必要か

pages/404.tsxはSSG時に特別に処理されるため、必ず存在する必要があります。一方、app/ディレクトリでは、not-found.tsxが404処理に使われますが、これはビルド時に静的な404ページとして出力されません。そのため、SSGに対応しつつApp Routerのページを使用するためには、今回のようにリダイレクトを利用する方法が有効です。

まとめ

• SSG対応のためにpages/404.tsxは必要
• App RouterのUIに統一したい場合はリダイレクトを活用
• リダイレクト先に任意のUIを実装してユーザー体験を向上