Next.js执行npm run build报错Unsupported Server Component type求助

• 强制标记客户端组件
  Pages Router里，Next.js默认会把/pages下的页面当成服务器组件处理，哪怕你写的是客户端逻辑。必须在页面文件**最顶部（所有import之前）**加上'use client'指令，明确告诉Next.js这是客户端组件。比如：

  'use client';
  import React, { useState } from 'react';
  
  export default function AddData() {
    const [formData, setFormData] = useState({});
    // 组件逻辑
    return <div>...</div>;
  }
  

• 排查组件依赖的类型
  如果你在客户端组件里导入了其他没有加'use client'的组件，那些组件会被默认识别为服务器组件，而客户端组件不能嵌套服务器组件，构建时就会触发这个错误。逐个检查页面里的所有导入，确保所有依赖的组件要么加了'use client'，要么是纯静态UI组件（不使用useState、useEffect等客户端钩子，也不依赖浏览器API）。

• 移除页面顶层的服务器端逻辑
  Dev模式下预渲染逻辑没那么严格，但build时会强制预渲染页面。如果你的页面组件顶层直接调用了服务器端专属API（比如fs、path模块），或者执行了需要服务器环境的代码，就会报错。把这些逻辑移到getServerSideProps或getStaticProps里，不要在组件函数外直接执行。

• 清理缓存重新构建
  缓存异常也可能导致这类奇怪的错误，执行以下命令清理后重新构建：

  rm -rf .next node_modules package-lock.json
  npm install
  npm run build
  

• 检查路由目录是否混用
  如果你的项目同时存在/pages和/app目录（即混合使用Pages Router和App Router），Next.js可能会出现组件类型识别混乱。如果不需要App Router，直接删除/app目录；如果需要保留，确保两个路由体系的组件都正确标记了'use client'或'use server'，不要混用逻辑。

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