部署Blitz.js应用至Vercel报错，本地运行正常

本地执行blitz build && blitz start可正常运行Blitz.js应用，无任何报错。但将代码推送到GitHub后，Vercel完成构建编译操作后，页面仅显示空白界面并提示“Something went wrong! Try Again”，无法渲染任何内容。

Vercel错误日志 #

Error: Usage of `useAuthenticatedBlitzContext` is supported only in next.js 13.0.0 and above. Please upgrade your next.js version.
    at /var/task/.next/server/chunks/285.js:112:12642
    at Generator.next (<anonymous>)
    at /var/task/.next/server/chunks/285.js:112:10296
    at new Promise (<anonymous>)
    at __async$1 (/var/task/.next/server/chunks/285.js:112:10116)
    at getBlitzContext (/var/task/.next/server/chunks/285.js:112:11997)
    at /var/task/.next/server/chunks/285.js:112:74680
    at Generator.next (<anonymous>)
    at /var/task/.next/server/chunks/285.js:112:74581
    at new Promise (<anonymous>) {
  digest: '2099296089'
}

package.json配置 #

"dependencies": {
    "@blitzjs/auth": "2.0.5",
    "@blitzjs/next": "2.0.5",
    "@blitzjs/rpc": "2.0.5",
    "@prisma/client": "5.4.2",
    "blitz": "2.0.8",
    "formik": "2.4.5",
    "next": "14.2.2",
    "prisma": "5.4.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "secure-password": "4.0.0",
    "zod": "3.22.4"
  },
  "devDependencies": {
    "@next/env": "13.4.19",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/react-hooks": "8.0.1",
    "@types/node": "18.11.9",
    "@types/preview-email": "2.0.1",
    "@types/react": "18.0.25",
    "@typescript-eslint/eslint-plugin": "5.42.1",
    "@vitejs/plugin-react": "2.2.0",
    "ajv": "^7.0.0",
    "autoprefixer": "10.4.18",
    "eslint": "8.27.0",
    "eslint-config-next": "12.3.1",
    "eslint-config-prettier": "8.5.0",
    "husky": "8.0.2",
    "jsdom": "20.0.3",
    "lint-staged": "13.0.3",
    "postcss": "8.4.35",
    "prettier": "^2.7.1",
    "prettier-plugin-prisma": "4.4.0",
    "pretty-quick": "3.1.3",
    "preview-email": "3.0.7",
    "tailwindcss": "3.4.1",
    "typescript": "^4.8.4",
    "vite-tsconfig-paths": "3.6.0",
    "vitest": "0.25.3"
  }

解决方案 #

1. 统一Next.js相关依赖版本：将devDependencies中的@next/env和eslint-config-next升级到与dependencies中next相同的14.2.2版本，修改后对应配置如下：

   "devDependencies": {
     "@next/env": "14.2.2",
     // 其他依赖保持不变
     "eslint-config-next": "14.2.2",
     // 其他依赖保持不变
   }
   

2. 清理并重新安装依赖：删除本地node_modules目录和package-lock.json（或yarn.lock）文件，执行npm install（或yarn install）重新安装所有依赖。
3. 本地验证：再次执行blitz build && blitz start确认应用正常运行。
4. 重新部署：将修改后的代码推送到GitHub，触发Vercel重新构建部署。

原因说明 #

虽然dependencies中指定了Next.js 14.2.2，但devDependencies中的旧版本@next/env和eslint-config-next会引发依赖解析冲突，导致Vercel构建环境中实际使用的Next.js版本不符合Blitz.js对useAuthenticatedBlitzContext的版本要求，最终触发报错。统一所有Next.js相关依赖的版本即可解决该问题。

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