Next.js 12で開発中のHMRがうまくいかない場合の対処方法です。
TL;DR
以下の、Next.js 12以降へのUpgrade時の移行ガイドを参照してよしなに設定してください。
環境
- Next.js 12以上
- nginxやApacheなどをReverse-Proxyとして、Next.js開発サーバーの前段に配置している場合
解説
Next.js 12では、devモードでのコード編集時のホットリロード (HMR) はWebSocketを介してクライント側に通知されるようになりました。
- 上記環境のように、ReverseProxyとしてWebサーバーを立てて開発している場合、nginxやApacheの設定がされていないとWebSocketのコネクション確率ができずにHMRがうごかなくなる場合があります。
- この場合、ブラウザ側のconsoleログに
WebSocket connection to 'wss://xxxxxx/_next/webpack-hmr' failedなどがでる。
対応方法
Next.js公式のアップグレードガイドを参考に、ブラウザ -> Reverse-Proxy -> Next.js 間のWebSocketのコネクション確立時のやりとりができるように設定してあげればOK
nginxの場合
location /_next/webpack-hmr {
proxy_pass http://localhost:3000/_next/webpack-hmr;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
- refs : Upgrade Guide | Next.js
apacheの場合
# (mod_rewriteなどは適宜設定)
<Location /_next/webpack-hmr>
RewriteEngine On
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule /(.*) ws://localhost:3000/_next/webpack-hmr/$1 [P,L]
ProxyPass ws://localhost:3000/_next/webpack-hmr retry=0 timeout=30
ProxyPassReverse ws://localhost:3000/_next/webpack-hmr
</Location>
以上。Apaecheの場合もっと簡潔な書き方があるかも。
余談。これにぶつかるまで、HMRがserver-sent events を使ってるのに気づいてなかったのでびっくりした。