WebSocket connection to url/_next/webpack-hmr' failed

Question

I am using next.js version 12 to deploy a webpage but when deployed it gives a warning in console

websocket.js?a9be:45 WebSocket connection to 'wss://eteaga.com/_next/webpack-hmr' failed:

In the localhost it doesn't give any warnings or problems. Is it the new version of next.js that needs some configuration added?

Answer 1

You have to define a new location block for websockets, & add the nginx configurations for upgrading the connection there:

        location /_next/webpack-hmr {

        # I assumed my server is running on port 3000 on localhost
        proxy_pass http://localhost:3000/_next/webpack-hmr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        }