使用npx create-next-app创建项目后执行next build报错求助

问题场景 #

• 通过 npx create-next-app@latest 创建项目，选择了TypeScript、ESLint、Tailwind CSS、src目录、App Router等配置
• npm run dev 可正常访问默认样板页面，但执行 next build 生成静态文件时失败，预渲染报错：
  • /500、/404页面：TypeError: Cannot read properties of null (reading 'useContext')
  • /页面：TypeError: Cannot read properties of null (reading 'useMemo')
• 未修改任何默认文件，找不到对应hooks的显式引用，不清楚404/500页面代码位置，node_modules中存在React依赖

解决方法 #

1. 检查Node.js版本兼容性 #

Next.js对Node.js版本有严格要求，确保使用官方推荐的LTS版本（如v18.x或v20.x）。执行以下步骤：

# 查看当前版本
node -v
# 若版本不符，用nvm切换（需先安装nvm）
nvm install 20
nvm use 20
# 重装依赖
rm -rf node_modules package-lock.json
npm install

2. 清理缓存后重新构建 #

缓存异常可能导致渲染错误，执行清理命令后重试：

# 带无缓存参数构建
npm run build -- --no-cache
# 或手动删除缓存目录
rm -rf .next out
npm run build

3. 确保React与React-DOM版本一致 #

版本不匹配会引发hooks运行异常，执行命令统一版本：

npm install react@latest react-dom@latest

4. 了解默认错误页面位置（App Router） #

App Router下的404/500页面由框架内置生成，若需自定义，可在src/app目录创建：

• not-found.tsx（对应404页面）
• error.tsx（对应500页面）
  无需自定义的情况下，上述缓存/版本修复步骤即可解决内置页面的渲染问题。

5. 降级Next.js版本 #

若为当前版本bug，尝试降级到稳定版本：

npm install next@13.4.19

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