はじめに

Next.jsでerorr.tsxとnot-found.tsxのファイルを作成した際に、どちらもサーバーコンポーネントとして作成してbuildしたところ、erorr.tsxのみuse clientディレクティブが必要とエラーをはかれてしまいました

個人的にはuseState、useEffect、onClick、onChange等を使ってないので、サーバーコンポネントで十分なのかと思ったのですが、、、

そのため、この記事ではなぜerorr.tsxのみクライエントコンポーネントである必要があるのかについて調べたことをまとめます

`not-found.tsx`と`error.tsx`について

not-foundエラーは存在しないリソースへのリクエストだということを知らせるもののため、クライエントサイドの処理を必要としない

このファイルではサーバーサイドだけではなく、クライエントサイドのエラーも補足して、動作します
そのため、Next.jsのファイルの規則として、クライエントサイドでも動作することを保証する必要があるため、use clientディレクティブを使う必要がある