Next.jsデータをvercelにデプロイする時のエラー解消の忘備録。
#前提
Next.jsで作ったアプリをvercelにデプロイしようとしたところ下記のエラーで進まなくなってしまった。
Build optimization failed: found page without a React Component as default export in
pages/config/firebase
See https://nextjs.org/docs/messages/page-without-valid-component for more info.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
要約すると、コンポーネントが見つからないという内容のようだ。(この場合はpages>config>firebaseが見つからない。)
#結論
Next.jsではディレクトリ構造によってルーティングが決まるという性質があるらしく、'pages'ディレクトリ内には原則的にページの表示内容のファイルのみを置く必要がある。('api'ファイルは例外。)
そのため今回はfirebaseの設定ファイルである'config'ディレクトリを'pages'内に作ってしまったことでエラーになった。
#解消方法
'config'ディレクトリを'pages'ディレクトリの外に移動させることで解消できた。
'src'ディレクトリを新たに作成し、その中に'pages'と'config'を入れる形でも良い。
src/
├config/
| └firebase.js
└pages/
└index.js