はじめに
vercelにNext.jsのアプリをデプロイしようとしたところ、以下のエラーがvercel画面上で表示された。
No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"
Next.jsのversionが見つかりませんと言われているようです。
やったこと
まずNext.jsのバージョンを確認してみました。
package.jsonでは以下のようになっています。
"dependencies": {
"next": "latest",
},
latestとなっていてバージョンを明記した方がいいかと思い、以下のように変更しました。
"dependencies": {
"next": "14.2.0",
},
デプロイをもう一度試したところ同じエラーが表示されてしまいます。
解決法
インターネット上で調べてみるとどうやらデプロイ時にルートディレクトリをvercel側が確認しにいく時に、入れ子構造になっているとうまくソースを見つけることができないようです。
どういうことがというと、my-appというフォルダを作ったとします。
そのディレクトリ内でNext.jsをインストールするとmy-appの配下にさらにmy-appというプロジェクトができる構造になります。ここでは便宜上my-app2と呼びます。
そしてmy-app2の中にappフォルダなど実際のソースが格納されています。
このプロジェクトの構造は以下のようになっています。
my-app > my-app2 > app, package.json etc...
この構造になっているとvercelはmy-appの部分をルートディレクトリとしてソースを確認しますが、ソースが実際に格納されているのはmy-app2になるので、「Next.jsのバージョンが確認できません」という今回のエラーが発生していました。
解決法としては、my-app2に格納されているものを全てmy-app配下に配置しなおすことでエラー解消できました。
プロジェクトの構造は以下のようになります。
my-app > app, package.json etc...
おわりに
はじめてvercelを使用してるのでエラーが出てしまいますが、同じように初めてvercelを使う人の参考になれば幸いです！
参考