この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Next.jsをローカルで開発する際に、コードを修正しても開発サーバー上で更新されませんでした。
その時に解決した方法を紹介します。
何が起こった？
開発環境を構築後、コードを修正してファイルを保存したのですが、ページの修正箇所が更新されませんでした。
通常ファイルを上書き保存したら、ホットリロードされて、自動で画面が更新されます。
もしホットリロードされなくても、ブラウザをリロードしたら更新されます。
ですが、今回はブラウザを何度リロードしても更新されませんでした。
原因と解決策
原因
開発サーバーを起動するコマンドを間違えた。
解決策
npm run dev のコマンドを打って開発サーバーを起動する。
npm run dev原因と解決策の詳細を解説していきます。
原因の詳細
解決策がすぐにみたい方は解決策の詳細に進んでください。
問題の原因としては、開発サーバーの起動コマンドとしてnpm startを打っていたことです。
npm startとは？参考サイトhttps://nextjs.org/docs
なぜ間違えたか？
なぜコマンドを間違えたかというと、Reactの開発サーバー起動コマンドがnpm startだったので、よく調べずにNext.jsでも同じコマンドを使ってしまったからです。
解決策の詳細
解決策は正しい開発サーバー起動コマンドを打つことです。
以下コマンドを打って開発サーバーを起動すればホットリロードが効いて更新されるようになりました。
正しい開発サーバー起動コマンド
正しい開発サーバー起動コマンドは npm run devです。
npm run dev根本的な解決策
今回の失敗でよく調べずにコマンドを打つのは良くないことが改めてわかりました。
これからはちゃんと調べてからコマンドを打ちたいと思います。
まとめ
今回の問題は 事前に調べないで進めたことが原因だと思います。
特にコマンド関連は調べてから進めていきたいです。
