Next.jsを使いたい

エラー頻発だったけど、なんとか起動できたので共有

*最終的に「app Router」の機能も盛り込んだアプリを作成していたから、エラー頻発だったのかもと思っています！
なので、Next.jsでアプリ作るときに、app Routerどうする？みたいな質問されたときは「No」を選ぶとよいです！使うなら「Yes」で！

以下のメモは、間違ってapp Router入れちゃったアプリをyarnを使って起動する流れになります！

chatGPTに聞きまくって解決！

まず、Ubuntu開いて以下のコマンドを入力

npx create-next-app first-next-app　　//first-next-app は好きなアプリ名でOK

作ったら、「first-next-app」に移動

cd first-next-app

教材では、このアプリをVScodeで開いて、「package.json」の「scripts」の中の「dev」に何を記載されているのか確認していて、私の場合は「next dev」が記載されていた。

そしたら、Ubuntuに戻って以下のコマンドを実行

yarn dev

でもすぐエラー＾＾

Error: Cannot find module 'node:buffer'

chatGPTによると

Node.jsのbufferモジュールが見つからないために発生しています

そして、以下の解決策を実行

①プロジェクトのルートディレクトリに移動して、node_modulesディレクトリを削除

rm -rf node_modules

②package-lock.jsonファイルも削除

rm package-lock.json

③パッケージを再インストール。yarnコマンドを使用して、依存関係を再インストール

yarn install

ここまではできた
・・・そしたらまたエラー
yarn install がうまくいかなくて、エラー文見たらnodeのバージョンが対応してないよ！って言ってました。

今度はnode.jsのバージョンを変更
この時推奨されていたバージョンは「12.22.0」「14.17.0」「16.0.0」
私はとりあえず一番新しい「16.0.0」なら大丈夫でしょ！と思ってインストールしました。

それでもだめ＞＜

やっぱり　yarn install が通らない

しかも推奨されたバージョンが最初と変わってて本当に意味わからなかったｗ
今度は「14.18.0」「16.14.0」「18.0.0」
最新を選んで失敗したので、今度は「16.14.0」にバージョンを変更

まただめ・・・・・・・
しかも yarn install 入力したらそんなファイルもディレクトリもないよ！とか言われるという・・・・・

仕方がないので、「18.0.0」にnode.jsのバージョンを変更

そして、yarn も最新版に再インストールしなおしました
以下にコマンド貼っときます。

npm unisntall -g yarn

npm install -g yarn@latest

そしたら、エラーにはなったけど、yarn自体は読み込んでくれたので、再度以下コマンドを実行

yarn install

そうしたらちゃんと全部読み込んでくれて、

yarn dev

を実行したらちゃんと「http://localhost:3000」が開きました～；；；；

長かった・・・・
Reactを勉強し始めてから分からないことだらけで楽しくなくなってたけど、とにかくやり続ける精神で理解できるまで手を動かしていきます！！

まとめ

chatGPTに分からないことは何でも質問するべし！！！！！
今回のエラーの原因は
・Node.jsのバージョンが「yarn dev」コマンドに対応していなかった
・yarn自体のバージョンも最新版じゃなかった可能性あり
・「node_modules」と「package-lock.json」のファイルが邪魔だった

こんなところかなと・・・

一応動いてよかった記念と、今後も同じことが起こる可能性があるため、メモ代わりにしておきます。