nginx上でNext.js 12 SSRをHMRさせる

Next.js 11 から 12 にしたら HMR が死んだので復活させるための設定を書いておきます

確認環境

設定例

標準状態で npx next を叩いた状態を想定してます

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen       80;

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass  http://localhost:3000;
    }
}

関連記事

快適に開発できるNext.jsの環境を作る Next.js + TSでuseRouter()をモックする nginxでNode.jsインスタンスに対してリバースプロキシする Windows + nginxでPHPを動作させる nginxのリバースプロキシでBasic認証を通す nginxで複数のlocationを正規表現でまとめる Next.js事始め React + Jestでコンポーネントの分岐出力をテストする