はじめに
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.tsx
not-foundエラーは存在しないリソースへのリクエストだということを知らせるもののため、クライエントサイドの処理を必要としない
error.tsx
このファイルではサーバーサイドだけではなく、クライエントサイドのエラーも補足して、動作します
そのため、Next.jsのファイルの規則として、クライエントサイドでも動作することを保証する必要があるため、use clientディレクティブを使う必要がある