使用環境
・MacOS BigSur（11.5.2）
・VScode（1.59.1）
・Node.js (16.1.1）
・React（17.0.2）
・Next.js（11.1.0）
はじめに
Vercelのビルド時に出たエラー’Page Without Valid React Component’の解決方法です。
04:50:30.440 > Build error occurred
04:50:30.442 Error: Build optimization failed: found pages without a React Component as default export in
04:50:30.442 pages/editPage
04:50:30.442 pages/profile
04:50:30.442 pages/search
04:50:30.442 pages/userAuth
04:50:30.443 See https://nextjs.org/docs/messages/page-without-valid-component for more info.
04:50:30.443 at /vercel/path0/node_modules/next/dist/build/index.js:597:19
04:50:30.444 at processTicksAndRejections (internal/process/task_queues.js:95:5)
04:50:30.444 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20)
04:50:30.473 error Command failed with exit code 1.
04:50:30.474 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
04:50:30.493 Error: Command "yarn run build" exited with 1
結論/解決策
Vercelビルド時のエラーログだけではよく分からなかったので、エラーログに表示されていたNext.jsの公式ドキュメントのURLに飛んだら方法が書いてありました。
pagesの配下のReactコンポーネント（ページとして表示させたいコンポーネント）はexportではなく、export default を使用しなければいけないそうです。
If the file is meant to be a page, double check you have an export default with the React Component instead of an export. If you're already using export default, make sure the returned value is a valid React Component.
- 公式DOCより
（後々、エラーログみたらちゃんと書いてありました
Error: Build optimization failed: found pages without a React Component as default export in）
最後に
default exportだとimportする際のクラス名や関数名が一致していなくても呼び出せることから、予期せぬエラーが生じるのを回避するためにexportを使った方がいいという情報をどこかでみたので慣習的にそうしていました。
しかし今回のようにNext.jsでpagesのコンポーネントとして読み込ませる時など、default exportでなければValid React Componentとしてみなされないケースもあるみたいです。
なぜそうなのか気になって公式ドキュメントのPagesの解説をみましたが、詳しくは書いてありませんでした。これ以上深堀まではしてませんが、そういうものだと思っておきます。
もし詳しい方がいたら情報いただけると幸いです 🙇
参考資料
- Next.js 公式ドキュメントPage Without Valid React Component
- Hatena Blog 【React/ES6】named exportsとdefault exportsの使い分け