【Next.js学習日記】ハンバーガーメニューが消えた!? パッケージ依存の落とし穴と戦っています

こんにちは、Ryuseiです!

今回はNext.jsでの開発中に起きたトラブルと、それに奮闘している様子を学習日記として残しておこうと思います。

BodyHead.jsでのハンバーガーメニュー作成中の出来事

現在取り組んでいるのは、BodyHead.jsにハンバーガーメニューを組み込む作業です。

ところが、ある日突然「スクロール時に表示されていたはずのハンバーガーメニューが表示されない!」という事態に…。

どうやら、あるパッケージのバージョンを変更したことが原因のようです。画像のスライドエフェクトを追加しようとしてインストールしたパッケージで、cursor内のAIが推してきた内容を無視して導入した結果、想定外のトラブルを招いてしまった様子。

しかも、そのパッケージをなぜ入れたのか、どのバージョンにしたのか、記録を取っておらず、リポジトリにプッシュ済みで依存関係の再構築が怖くて試せていないのが今の状況です。

ローカル開発中の謎のエラー

さらに、ローカル環境で表示しているサイトの「N(おそらくNext.jsのロゴ?)」部分にエラーが2つ出ているのですが、内容が確認できずにいます。

ターミナルでは

_app.jsindex.jsではheadタグ内にstylesheetのインポートは書かないで

というエラーが出続けていて、ちゃんと_document.jsに移動させてもなぜか解消されない…。こちらも謎です。

今後の方針と反省点

今回の経験で学んだことは以下の通りです:

  • パッケージを導入・変更する際は理由とバージョンをメモしておくことが大事!
  • AIの提案は便利だけど、警告はちゃんと確認する!
  • 依存関係に変化がある作業は、リポジトリの管理とブランチ運用をしっかりと!

現在は手がかりをもとに少しずつ原因を探っている段階です。トラブルも含めて勉強のうち…と前向きに取り組んでいます!


このような形で問題に向き合った記録を残しておくと、後から振り返った時に役立ちますし、読んでくれた誰かの助けになるかもしれません。

引き続き、試行錯誤しながら学習を続けていきます!