配置NGINX反向代理以返回NextJS自定义404/5xx页面

某基于NextJS的网站通过yarn start命令以服务器模式部署在服务器的8000端口，前端由NGINX作为反向代理。目前遇到错误页面显示问题：NextJS本身具备返回自定义404、5xx页面的功能，但访问网站无效路由时，返回的是NGINX的502页面而非NextJS的404页面（已验证直接访问8000端口时NextJS可正常返回404页面）。

#PROXY-START/

location ^~ /
{
    proxy_pass http://localhost:8000;
    proxy_set_header Host localhost;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    error_page 404 /404;
    error_page 500 /500;

    #Persistent connection related configuration

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    
    
    set $static_file4EjPNqQe 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_file4EjPNqQe 1;
        expires 12h;
        }
    if ( $static_file4EjPNqQe = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

66.77.88.99 - - [18/May/2023:13:03:17 +0000] "GET /ttyyrereewww HTTP/1.1" 502 552 "-" "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Mobile Safari/537.36 Edg/113.0.1774.42"

2023/05/18 13:03:08 [error] 3802465#0: *249566 connect() failed (111: Connection refused) while connecting to upstream, client: 66.77.88.99, server: pre.com, request: "GET /ttyyreree HTTP/1.1", upstream: "http://[::1]:8000/ttyyreree", host: "pre.com"
2023/05/18 13:03:17 [error] 3802465#0: *249566 no live upstreams while connecting to upstream, client: 66.77.88.99, server: pre.com, request: "GET /ttyyrereewww HTTP/1.1", upstream: "http://localhost/ttyyrereewww", host: "pre.com"

配置NGINX，使其返回NextJS的404或500页面而非NGINX自带的错误页面。

• 解决上游连接问题：错误日志里的*connect() failed (111: Connection refused)*显示Nginx连不上NextJS的8000端口。先确认NextJS服务是否正常运行，可执行curl http://127.0.0.1:8000测试。如果服务只绑定IPv4的127.0.0.1，把proxy_pass里的localhost改成127.0.0.1，避免Nginx优先用IPv6连接失败。
• 修正Host头配置：当前proxy_set_header Host localhost;会导致NextJS无法正确识别请求域名，改成proxy_set_header Host $host;，让NextJS返回对应域名的自定义错误页面。
• 调整错误页转发规则：原配置的error_page 404 /404;会让Nginx自行处理错误，改成将错误请求转发到NextJS服务，具体配置如下：
  1. 在主location块里替换原error_page配置为：error_page 404 500 502 = @nextjs_errors;
  2. 添加一个新的location块，专门处理错误请求的转发：

location @nextjs_errors {
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

#PROXY-START/

location ^~ /
{
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    # 将错误请求转发到NextJS服务获取自定义错误页
    error_page 404 500 502 = @nextjs_errors;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache
    set $static_file4EjPNqQe 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_file4EjPNqQe 1;
        expires 12h;
    }
    if ( $static_file4EjPNqQe = 0 )
    {
        add_header Cache-Control no-cache;
    }
}

location @nextjs_errors {
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

#PROXY-END/

内容的提问来源于stack exchange，提问作者zsubzwary