NextJS生成静态页面报错：useContext读取null属性求助

核心问题分析 #

1. pages目录滥用：pages是Next.js的路由专属目录，把普通组件放进去会被自动注册为路由（比如Header.js会生成/Header路径），这是调整后出现更多导出错误的直接原因。
2. 服务器组件误用客户端API：Next.js 13+ App Router默认所有组件为服务器组件，若组件中使用了useContext、useState等客户端钩子，或next/head这类依赖浏览器上下文的组件，构建时会触发上下文为空的错误。

具体解决步骤 #

1. 恢复正确的组件目录结构

立即将组件从pages目录移出，推荐放在src/components（社区通用规范）或src/app/Components，示例结构：

src/
├── app/
│   ├── page.js
│   └── layout.js
└── components/
    ├── Header/
    │   ├── Header.js
    │   └── Header.module.css
    ├── Main/
    │   ├── Main.js
    │   └── Main.module.css
    └── Footer/
        ├── Footer.js
        └── Footer.module.css

2. 为客户端组件添加'use client'指令

检查Header、Main、Footer等组件代码，若包含以下内容，必须在文件最顶部添加'use client'：

• React客户端钩子（useContext、useState、useEffect等）
• next/head或next/navigation中的路由钩子
• 浏览器专属API（window、document等）

示例（Header.js）：

'use client';

import styles from './Header.module.css';
import Head from 'next/head';

export default function Header() {
  return (
    <>
      <Head>
        <title>My App</title>
      </Head>
      <header className={styles.header}>...</header>
    </>
  );
}

注意：'use client'必须是文件第一行（注释可在其上方，不能有其他代码）。

3. 清理构建缓存并重新安装依赖

执行以下命令清理旧缓存，避免依赖冲突：

rm -rf .next
rm package-lock.json # 若用yarn则删除yarn.lock
npm install # 或 yarn install

之后重新运行next build。

4. 检查组件导入与导出

确保page.js中组件导入路径正确，且组件使用默认导出（或导入时匹配命名导出），示例：

// src/app/page.js
import Header from '@/components/Header/Header';
import Main from '@/components/Main/Main';
import Footer from '@/components/Footer/Footer';

export default function Home() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  );
}

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