Next.js Discord

Discord Forum

WebSocket connection to 'ws://<site-name>/_next/webpack-hmr' failed: (@ websocket.js:77)

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I am using LocalWP (also known as simply Local) to spin up a Headless WordPress app, which then ties into a Next.js front end.

Local hosts the WordPress in /app and the Node app, in this case Nextjs in /app-node. It runs nginx web server, PHP v8.3.0, MySQL v8.0.16, and WordPress v6.5.3. On installation, Local comes pre-built with a sample app using Next v12, which I then upgrade to Next v14.

Local provides a site domain alias of <site-name>.local which is actually hosted on localhost:10023 using npm run dev. After upgrading to Next v14, I consistently get a websocket failed error (see title) even after restarting when I navigate to <site-name>.local. The websocket error doesn't happen at localhost:10023. Does this require some sort of configuration of nginx for the alias to be used correctly with Next? Not sure if this is a bug with Local, Next, or just poor config. Help!

5 Replies

Transvaal lionOP
This is nginx.conf.hbs:
error_log "{{logs.errorLog}}";

events {
    worker_connections  1024;
}

http {
    include includes/mime-types.conf;

    server_names_hash_bucket_size 128;

    client_max_body_size 1000M;
    default_type       application/octet-stream;
    access_log         off;
    sendfile           off;
    keepalive_timeout  3;

    fastcgi_buffers 32 32k;
    fastcgi_buffer_size 32k;
    fastcgi_read_timeout 1800s;

    map $http_x_forwarded_proto $resolved_scheme {
        default "http";
        "https" "https";
    }

    map $resolved_scheme $fastcgi_https {
        default '';
        https on;
    }

    include site.conf;
}
This is site.conf.hbs:
upstream php {
  {{#each fastcgi_servers}}
  server {{this}};
  {{/each}}
}

server {
    listen 127.0.0.1:{{port}};
    listen [::1]:{{port}};
    root   "{{root}}";

    index index.php index.html index.htm;

    #
    # Generic restrictions for things like PHP files in uploads
    #
    include includes/restrictions.conf;

    #
    # Gzip rules
    #
    include includes/gzip.conf;

    #
    # WordPress Rules
    #
    {{#unless site.multiSite}}
    include includes/wordpress-single.conf;
    {{else}}
    include includes/wordpress-multi.conf;
    {{/unless}}

    #
    # Forward 404's to WordPress
    #
    error_page 404 = @wperror;
    location @wperror {
        rewrite ^/(.*)$ /index.php?q=$1 last;
    }

    #
    # Static file rules
    #
    location ~* \.(?:css|js)$ {
        access_log        off;
        log_not_found     off;
        add_header        Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
    }

    location ~* \.(?:jpg|jpeg|gif|png|ico|xml)$ {
        access_log        off;
        log_not_found     off;
        expires           5m;
        add_header        Cache-Control "public";
    }

    location ~* \.(?:eot|woff|woff2|ttf|svg|otf) {
        access_log        off;
        log_not_found     off;

        expires           5m;
        add_header        Cache-Control "public";

        # allow CORS requests
        add_header        Access-Control-Allow-Origin *;
    }
end of file (char limit)
    #
    # PHP-FPM
    #
    location ~ \.php$ {
        try_files $uri =404;

        fastcgi_split_path_info ^(.+\.php)(/.+)$;

        fastcgi_param   QUERY_STRING            $query_string;
        fastcgi_param   REQUEST_METHOD          $request_method;
        fastcgi_param   CONTENT_TYPE            $content_type;
        fastcgi_param   CONTENT_LENGTH          $content_length;

        fastcgi_param   SCRIPT_FILENAME         $document_root$fastcgi_script_name;
        fastcgi_param   SCRIPT_NAME             $fastcgi_script_name;
        fastcgi_param   PATH_INFO               $fastcgi_path_info;
        fastcgi_param   PATH_TRANSLATED         $document_root$fastcgi_path_info;
        fastcgi_param   REQUEST_URI             $request_uri;
        fastcgi_param   DOCUMENT_URI            $document_uri;
        fastcgi_param   DOCUMENT_ROOT           $document_root;
        fastcgi_param   SERVER_PROTOCOL         $server_protocol;

        fastcgi_param   GATEWAY_INTERFACE       CGI/1.1;
        fastcgi_param   SERVER_SOFTWARE         nginx/$nginx_version;

        fastcgi_param   REMOTE_ADDR             $remote_addr;
        fastcgi_param   REMOTE_PORT             $remote_port;
        fastcgi_param   SERVER_ADDR             $server_addr;
        fastcgi_param   SERVER_PORT             $server_port;
        fastcgi_param   SERVER_NAME             $host;

        fastcgi_param   HTTPS                   $fastcgi_https;

        fastcgi_param   REDIRECT_STATUS         200;

        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

        fastcgi_pass php;
        fastcgi_buffer_size      64k;
        fastcgi_buffers          32 32k;
        fastcgi_read_timeout     1200s;

        proxy_buffer_size        64k;
        proxy_buffers            32 32k;
        proxy_busy_buffers_size  256k;
    }

}
I tried adding this to the end of site.conf.hbs inside server {} with no luck:

# Add WebSocket support
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
Transvaal lionOP
How do I configure Next v14 properly with nginx? That may be my issue since Local uses nginx