Zenn
Closed1

Next.js 13のApp RouterでSSGした場合にカスタムしたエラー画面が表示されない

Next.js
React
TypeScript
App Router
Ryuki KamikuboRyuki Kamikubo

起きていること

公式ではApp Router使用時に/app/not-found.tsxを使って404画面をカスタマイズできると書かれているが、

こちらのIssueで指摘されているように、next buildでエクスポートしたファイルに404.htmlが生成されなくて、カスタムしたエラーページが表示されないというバグが起きているみたい。

暫定の解決法

/pages/404.tsxを以下のように作成し、/app/error/page.tsxに作成したエラー画面にリダイレクトさせることで回避

404.tsx
import { useRouter } from "next/navigation";
import { useEffect } from "react";

const RedirectPage = () => {
  const router = useRouter();
  useEffect(() => {
    router.push("/error");
  }, []);
  return null;
};

export default RedirectPage;
このスクラップは2024/03/29にクローズされました