无法通过Nginx启动NextJS项目的问题求助

问题核心分析 #

你遇到的问题是NextJS直连端口时正常，但通过Nginx代理到/nextjs/子路径时出错，即使配置了basePath和assetPrefix仍未解决。主要原因是Nginx代理路径转发规则错误，加上basePath配置后未重新构建项目导致未生效。

步骤1：修正NextJS配置（next.config.js） #

NextJS 10+版本中，basePath会自动处理静态资源的路径前缀，无需单独设置assetPrefix，简化配置如下：

module.exports = {
  basePath: '/nextjs',
}

关键操作：修改配置后必须重新构建并重启NextJS服务：

npm run build
npm start

（开发环境需重启npm run dev，生产环境建议使用build后的产物）

步骤2：修正Nginx代理配置 #

原配置中proxy_pass末尾的斜杠会导致路径前缀被剥离，与NextJS的basePath不匹配，调整后的完整配置：

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;

    include /etc/nginx/default.d/*.conf;

    location /nextjs/ {
        # 去掉proxy_pass末尾的斜杠，保留完整路径前缀转发
        proxy_pass http://127.0.0.1:4321;
        # 配置必要的代理头，确保NextJS正确识别请求
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 支持WebSocket（若项目用到）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location / {
        # 默认根路径可返回404或自定义页面
        return 404;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

配置说明 #

1. 去掉proxy_pass末尾的斜杠：
   原配置中proxy_pass http://127.0.0.1:4321/会将/nextjs/page转发为http://127.0.0.1:4321/page，但NextJS设置了basePath: '/nextjs'，仅识别/nextjs开头的路径，导致路由不匹配。去掉斜杠后，请求会完整转发为http://127.0.0.1:4321/nextjs/page，与NextJS的路由规则匹配。
2. 添加代理头：
   • Host头确保NextJS生成正确的页面链接；
   • X-Forwarded-*头让NextJS获取真实的客户端IP和请求协议，避免路径生成错误。

步骤3：生效配置 #

1. 重启Nginx服务：

sudo nginx -s reload

2. 测试访问：http://127.0.0.1/nextjs/，验证页面和静态资源是否正常加载。

排查补充 #

如果问题仍存在，可通过以下方式定位：

• 查看Nginx日志：/var/log/nginx/access.log和/var/log/nginx/error.log，检查请求转发是否符合预期；
• 直连NextJS的basePath路径：curl http://127.0.0.1:4321/nextjs，确认服务本身能正确响应；
• 检查NextJS服务是否监听在4321端口：netstat -tulpn | grep 4321。

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