Next.js自定义服务器文件移至上级目录后出现useContext读取错误

问题场景 #

用create-next-app创建的Next.js项目，当server.js放在client2目录内时，自定义服务器运行正常；但将server.js移到client2的上级目录，并且在代码中设置const app = next({ dev, dir:"./client2" });后，执行node server.js启动时抛出错误：

TypeError: Cannot read properties of null (reading 'useContext')
错误栈指向React的useContext及Next.js相关组件。

问题原因 #

这种错误通常是因为Next.js加载客户端代码时模块解析路径冲突。当server.js在上级目录时，Node.js会优先从上级目录的node_modules加载React/Next.js依赖，而client2目录下也有独立的node_modules，导致出现两个不同版本的React实例。useContext依赖的React上下文在跨实例环境下无法正常初始化，最终抛出读取null属性的错误。

解决方案 #

方案1：统一依赖安装位置 #

• 删除client2目录下的node_modules和package-lock.json（或yarn.lock）
• 在上级目录执行依赖安装命令：

  npm install
  

  确保React、Next.js等核心依赖仅存在于上级目录的node_modules中，避免多实例冲突。

方案2：调整Next.js模块解析配置 #

在client2/next.config.js中添加配置，强制Next.js从指定路径加载核心依赖：

const path = require('path');

module.exports = {
  webpack: (config, { isServer }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react': path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
      'next': path.resolve(__dirname, '../node_modules/next')
    };
    return config;
  }
};

方案3：使用npm工作区（推荐） #

如果是多项目结构，通过npm工作区统一管理依赖，避免重复安装和模块冲突：

1. 在上级目录的package.json中添加：

   {
     "private": true,
     "workspaces": [
       "client2"
     ]
   }
   

2. 删除client2下的node_modules和锁文件，在上级目录执行npm install，npm会自动统一管理所有工作区的依赖。

验证步骤 #

1. 按照上述方案调整后，删除所有node_modules和锁文件，重新安装依赖
2. 执行node server.js启动服务器
3. 访问页面，确认useContext相关功能正常运行

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