502 Bad gateway on html POST form submission

Question

I have a Next.js website I'm trying to deploy, but the login form is broken on the production server, and whenever I submit my login information it returns a 402 bad gateway. It uses Nginx for the reverse proxy. My Nginx Config:

server {
    listen 80;
    server_name [my ip];

    location /{
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/site/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/site/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.site) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = site) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;

    server_name site www.site;
    return 404; # managed by Certbot

Nginx access logs

ip - - [19/Nov/2024:23:03:20 +0000] "POST /account/login HTTP/1.1" 502 568 "https://site/account/login" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"

I tried increasing the nginx proxy buffer size, the timeout. But nothing works.