🍣

Next.jsの開発サーバー(dev server)が動かなくなる

2021/08/28に公開

問題

Next.js初心者です

yarn dev後、Google Chromeで Next.jsの開発サーバーを動かしていると、

・ リンクを押しても動作しない
・ リロードすると永遠にページの読み込み中になる
・ HMRも動いてない

の問題が起きてました

解決方法

・ Google chromeで chrome://serviceworker-internals/ を開く
・ Scope: localhost:3000 の記載があるサービスワーカーを見つけて Unregister する

3000番以外のポートや、Chrome以外のブラウザではちゃんと動いたので、localhost:3000 に対応しているサービスワーカーが悪さしてたっぽい

なんでこのサービスワーカーが存在してたのかは謎。Nuxt開発の時とかに出現したのかも

参考

Next.js dev server gets stuck after a while, requests just spin
https://github.com/vercel/next.js/issues/10061

Discussion