共享主机部署带自定义服务器的Next.js应用遇503及语法错误求助

问题根源 #

你遇到的SyntaxError: Unexpected token '??='是因为Node.js 14.x不支持ES2021引入的空值合并赋值运算符，而你使用的Next.js 13.0.3版本内部依赖中包含了该语法，导致Node.js无法解析代码，服务器启动失败，最终出现503 Service Unavailable错误。

Next.js 13官方要求Node.js版本至少为16.14.0或更高，但你的共享主机仅支持Node.js 14.21.2，因此必须降级Next.js到兼容Node.js 14的版本。

解决方案 #

1. 降级Next.js到兼容版本 #

Next.js 12.x系列完全支持Node.js 14.x，推荐降级到Next.js 12的最新稳定版（比如12.3.4）。

2. 更新package.json配置 #

修改package.json中的相关依赖和脚本：

{
  "name": "white-homes-nekretnine",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "lint": "next lint",
    "lint-fix": "next lint --fix",
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "@egjs/react-grid": "^1.12.1",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@reduxjs/toolkit": "^1.8.6",
    "animate.css": "^4.1.1",
    "apexcharts": "^3.35.5",
    "availity-reactstrap-validation": "^2.7.1",
    "axios": "^1.1.2",
    "bcrypt": "^5.1.0",
    "bootstrap": "^5.2.3",
    "formik": "^2.2.9",
    "i18next": "^23.1.0",
    "jsonwebtoken": "^9.0.0",
    "leaflet": "^1.9.3",
    "lord-icon-element": "^3.4.4",
    "lottie-web": "^5.11.0",
    "next": "^12.3.4",
    "next-i18next": "^11.3.0",
    "next-pwa": "^5.6.0",
    "next-translate-routes": "^1.9.0",
    "photoswipe": "^5.3.2",
    "pigeon-maps": "^0.21.3",
    "react": "^18.2.0",
    "react-alert": "^7.0.3",
    "react-alert-template-basic": "^1.0.2",
    "react-alert-template-mui": "^1.0.7",
    "react-apexcharts": "^1.4.0",
    "react-awesome-reveal": "^4.1.0",
    "react-bootstrap": "^2.7.2",
    "react-content-loader": "^6.2.0",
    "react-data-table-component": "^7.5.3",
    "react-dom": "^18.2.0",
    "react-dropzone-uploader": "^2.11.0",
    "react-feather": "^2.0.10",
    "react-i18next": "^13.0.0",
    "react-leaflet": "^4.1.0",
    "react-loader-spinner": "^5.3.4",
    "react-photoswipe-gallery": "^2.2.2",
    "react-range": "^1.8.14",
    "react-redux": "^8.0.5",
    "react-slick": "^0.29.0",
    "react-toastify": "^9.0.8",
    "reactstrap": "^9.1.4",
    "sass": "^1.55.0",
    "slick-carousel": "^1.8.1",
    "swiper": "^8.4.3",
    "typed.js": "^2.0.12",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "eslint": "^8.25.0",
    "eslint-config-next": "^12.3.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-react-app": "^7.0.1",
    "style-loader": "^3.3.2"
  },
  "browser": {
    "fs": false,
    "os": false,
    "path": false
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

3. 重新安装依赖并部署 #

执行以下命令：

# 删除现有依赖文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 构建生产版本
npm run build
# 启动生产服务器
npm run start

4. 额外检查 #

你的server.js代码在Next.js 12环境下可以正常运行，无需修改。如果启动后仍有503错误，需确认：

• 共享主机允许使用的端口是否与代码中port值一致（部分主机不允许使用3000端口，需改为指定端口）
• 主机的生产环境启动命令是否正确配置

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