Fixing the Next JS Websocket Connect To Webpack HMR Failed Error

I haven't been doing much frontend work lately, but when I do it's important that my hot module reload is working. I can't stand refreshing the page, waiting a full second, and losing my state changes to see a simple UI update.

This past week, I figured out how to fix Next JS's websocket connection to webpack hot module reload.

If hot module reload is not working on your next js app, and you are running nginx, this could fix you problems.

The fix I found is explained here.

Essentially, adding the following lines to the client config in the nginx.conf file fixed hot module reload for me on my next js app when it wasn't working.

location your_next_js_project {
    ...
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

I believe this might be something anyone running nginx with a next js app that is version 12+ might have to do since I never had this issue until I updated to version 12.