next.js: WebSocket connection failed errors after upgrade to Next.js 12

Hi, if you are using nginx in front of Next.js during development you will need to configure nginx to pass the WebSocket request correctly. Related nginx documentation here http://nginx.org/en/docs/http/websocket.html

For me, this code worked:

location /_next/webpack-hmr {
	proxy_pass http://loadbalancer/_next/webpack-hmr;
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
}

where loadbalacer is local docker server.

FWIW I was also having this issue and @ijjk’s comment (https://github.com/vercel/next.js/issues/30491#issuecomment-953337935) put me in the correct direction. Previously there had not been a need to include the web sockets proxying for HMR to work but it seems now there is. After I added to proxying to the Next.JS server and restarted Nginx I no longer have this issue.

@matt-joecoffee We are also serving the site from a real domain in a similar way I suspect to you.

# Websockets
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

Obviously not helpful for non nginx situations like @pmoskvin’s but perhaps the package there is not forwarding these same headers and upgrading the http version?

I have this problem on my nextjs12. Running locally…no custom server…

I have the same problem. Nginx is not used

“next”: “^12.0.1” node v16.13.0

Maybe it’s a custom server? I use this package https://github.com/fridays/next-routes

hey there and the provided solution for routing all hmr requests to the nextjs handler is not working for me. The cause for it is, that i have an apollo server with websockets as well. So my custom server is defining a custom websocket route:

const wsServer = new ws.Server({
  server: httpServer,
  path: '/graphql'
})

Searching for a solution…

I finally solved the issue I was having (see comment above). I use both a WS connection in my web app, which needs to be proxied in development, and Webpack HMR for development.

This is my modified custom server script (abbreviated):

import http from 'http';
import createNextServer from 'next';
import { createProxyMiddleware } from 'http-proxy-middleware';

const port = parseInt(process.env.PORT || '3000', 10);
const nextServer = createNextServer(/*...*/);
const nextRequestHandler = nextServer.getRequestHandler();

nextServer
	.prepare()
	.then(() => {
		const expressInstance = express();

		// Set up the WebSocket API proxy.
		expressInstance.use(
			createProxyMiddleware('/path/to/my/websocket/endpoint', {
				target: 'ws://192.168.0.123:1234',
				ws: true,
			})
		);

		// Set up REST API proxy.
		expressInstance.use('/api', createProxyMiddleware({
			target: 'http://192.168.0.123:1234',
		});

		/* Other routes… */
		server.all('*', (req, res) => nextRequestHandler(req, res));

		http.createServer(expressInstance).listen(port);
	});

Just to add, I was having this issue without any kind of middleware/proxy, I just restarted my computer to fix. Possible something WSL related.

@ijjk we’ll want to add this to the upgrading guide 👍

I have this same issue but I’m not using any customer server. Running Next.js 12 on Windows 11 with wsl2

For those using apache, here are the proxy settings you’ll need in your virtualhost, in this case I’m running node on port 10510, please adjust to suite your setup:

  ProxyPreserveHost On
  ProxyPassMatch ^/(_next/webpack-hmr)$  ws://localhost:10510/$1
  ProxyPass / http://localhost:10510/
  ProxyPassReverse / http://localhost:10510/

Ok, i fixed it simply with this:

    server.all(/^\/_next\/webpack-hmr(\/.*)?/, async (req: Request, res: Response) => {
        void handle(req, res)
    })

be aware of https://github.com/vercel/next.js/issues/18080, if you use a custom assetPrefix in dev mode, you need to wait for the next next.js version: #30632 (released in v12.0.3-canary.6)

Sorry for coming back to this, but can anybody help find a solution when using a custom Express server?

As I understand, the problem here is slightly different, because the WS request cannot be forwarded/proxied to a HTTP port, because Next.js handles requests using a JavaScript function.

Example (abbreviated):

import createNextServer from 'next';
const nextServer = createNextServer(/*...*/);
const nextRequestHandler = nextServer.getRequestHandler();
nextServer
	.prepare()
	.then(() => {
		const server = express();
		/* Other routes… */
		server.all('*', (req, res) => nextRequestHandler(req, res));
	});