初めてNext.jsを触り始めました、ゆひゃです。
Xserverにデプロイしたかったのでindex.htmlを出力して、、、と色々いじってたら、
websocket.js?a9be:62 WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: WebSocket is closed before the connection is established.
という警告が出てました。今回はその原因についてまとめておきます。
目次
警告「WebSocket is closed」
「npm run dev」でローカルサーバーを立ち上げたら
websocket.js?a9be:62 WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: WebSocket is closed before the connection is established.という警告が出ました。どうやらローカルサーバーのファイル監視の機能が働いていないようで、pages/index.jsを更新しても自動更新されません。
ちなみにページをリロードするとちゃんと表示されます。
原因「next.config.jsの記述」
今回Xserverにデプロイする予定だったため、pachage.jsonやnext.config.jsあたりを手当たり次第にいじってみて検証していました。
そこで、next.config.jsに
module.exports = {
...
assetPrefix: ','
}
と記述しました。この部分を削除して、もう一度「npm run dev」し直したところ、警告されることなく、ファイル監視も再開されました。
なんでassetPrefixをつけたのか
Xserverにデプロイするためにはindex.htmlをアップロードする必要があったわけですが、デフォルトで「npm run build」してもindex.htmlのcssとjsのためのソースが「/_next/static/.....」となっていました。
デプロイ先がルートディレクトリではなかったので「./_next/static/....」でないと正常に読み込まれないので、検索した結果「assetPrefix: '.'」を追加することで対処できると判明しました。
これでソース自体は読み込まれましたが、WebSocketの方に問題が発生したわけですね。
まとめ
現在Next.jsを触り始めて2日目ですが、Next.jsはルーティングも簡単でわかりやすいフレームワークだなと思っています。
ただ、ビルドやデプロイの設定などは今まで触ってこなかった部分なのでもう少し勉強が必要ですね。
Next.js完全に理解したい。
