title: "Websocket connection failed" when proxying requests to Next.js app via Apache server
body: <p>Since upgrading to Next.js 12 I'm getting the following error in the console when I run my Next.js app:</p>
  <blockquote>
  <p>WebSocket connection to 'wss://mysite.local/_next/webpack-hmr' failed</p>
  </blockquote>
  <p>I've discovered that this is related with Next.js 12 using web sockets for HMR connection (unlike previous Next.js versions). In the <a href="https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket" rel="nofollow noreferrer">guide</a> to upgrading to Next.js 12, the docs provide the following snippet as a fix when using Nginx:</p>
  <pre><code>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 &quot;upgrade&quot;;
  }
  </code></pre>
  <p>However, I use Apache to proxy requests to my Next.js app and can't find an example on how to do this with Apache. I know very little about server configuration or web sockets, so I would appreciate some help in removing that annoying error.</p>
  <p>I've searched around and tried a few things on my own, but had no success. Here's one attempt I've made (notice the rewrite rules at the bottom):</p>
  <pre><code>&lt;VirtualHost *:443&gt;
     ServerName mysite.local
     DocumentRoot &quot;/Users/grazianodev/Projects/mysite&quot;
     SSLEngine On
     SSLCertificateFile &quot;/Users/grazianodev/Projects/.crt/mysite.local.pem&quot;
     SSLCertificateKeyFile &quot;/Users/grazianodev/Projects/.crt/mysite.local-key.pem&quot;    
     ProxyPass / http://localhost:3000/
     ProxyPassReverse / http://localhost:3000/
     RewriteEngine on
     RewriteCond %{HTTP:Upgrade} websocket [NC]
     RewriteCond %{HTTP:Connection} upgrade [NC]
     RewriteRule ^/?(.*) &quot;wss://mysite.local/$1&quot; [P,L]   
  &lt;/VirtualHost&gt;
  </code></pre>