使用App Router的NextJS执行next build触发useContext空值错误

问题详情 #

• 使用App Router（非Pages Router）开发Next.js应用
• 执行next build时，根路径/、404、500页面预渲染全部失败
• 新建空白Next.js模板项目执行构建，仍出现相同错误
• 需求：生成可部署至Render的构建产物

错误日志 #

next build
- info Creating an optimized production build  
- info Compiled successfully
- info Linting and checking validity of types  
- info Collecting page data  
[    ] - info Generating static pages (0/4)TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/solomoncurly/code/test2/node_modules/react/cjs/react.production.min.js:24:118)
    at Head (/home/solomoncurly/code/test2/.next/server/pages/_error.js:282:44)
    at Wc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/solomoncurly/code/test2/node_modules/react/cjs/react.production.min.js:24:118)
    at Head (/home/solomoncurly/code/test2/.next/server/pages/_error.js:282:44)
    at Wc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)

Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/solomoncurly/code/test2/node_modules/react/cjs/react.production.min.js:24:118)
    at Head (/home/solomoncurly/code/test2/.next/server/pages/_error.js:282:44)
    at Wc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/solomoncurly/code/test2/node_modules/react/cjs/react.production.min.js:24:118)
    at Head (/home/solomoncurly/code/test2/.next/server/pages/_error.js:282:44)
    at Wc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
    at $c (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/solomoncurly/code/test2/node_modules/next/dist/compiled/react/cjs/react.production.min.js:28:118)
    at usePathname (/home/solomoncurly/code/test2/.next/server/chunks/256.js:1494:34)
    at ErrorBoundary (/home/solomoncurly/code/test2/.next/server/chunks/256.js:814:50)
    at Je (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:272)
    at Z (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Je (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:9)
    at Je (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:127:11)
    at Z (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Ke (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)
    at Me (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:130:289)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useContext')
    at exports.useContext (/home/solomoncurly/code/test2/node_modules/next/dist/compiled/react/cjs/react.production.min.js:28:118)
    at usePathname (/home/solomoncurly/code/test2/.next/server/chunks/256.js:1494:34)
    at ErrorBoundary (/home/solomoncurly/code/test2/.next/server/chunks/256.js:814:50)
    at Je (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:272)
    at Z (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Je (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:9)
    at Je (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:127:11)
    at Z (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Ke (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)
    at Me (/usr/local/lib/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:130:289)
- info Generating static pages (4/4)

> Export encountered errors on following paths:
    /_error: /404
    /_error: /500
    /page: /

解决方法 #

1. 统一Node.js版本 #

Next.js要求使用LTS版本的Node.js（推荐18.x或20.x），版本不兼容会导致依赖冲突：

• 运行node -v查看当前版本，不符合则升级/降级

2. 清理依赖并重新安装 #

• 删除node_modules：rm -rf node_modules
• 删除锁文件：rm package-lock.json（或yarn.lock）
• 重新安装依赖：npm install
• 清理Next.js缓存：npx next clean

3. 解决全局与本地Next.js版本冲突 #

日志显示全局Next.js（/usr/local/lib/node_modules/next）和项目本地依赖路径不一致，导致版本冲突：

• 卸载全局Next.js：npm uninstall -g next
• 使用项目本地版本执行构建：npx next build

4. 调整Next.js构建配置 #

在next.config.js中添加静态导出配置，适配Render部署：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  experimental: {
    appDir: true, // App Router 必开配置
  },
}

module.exports = nextConfig

5. 确保React与React-Dom版本一致 #

react和react-dom版本不匹配会引发上下文错误：

• 检查package.json中两者版本是否相同
• 若不一致，重新安装指定版本：npm install react@latest react-dom@latest

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