NextJS组件本地编译失败：useState报错仅支持客户端组件

1. 修复"useState只能在客户端组件使用"的错误 #

Next.js 13+ 的 App Router 中，组件默认是服务器组件，无法直接使用 useState、useEffect 这类客户端专属的 React Hooks。解决方法：

• 在使用 useState 的组件文件最顶部，添加一行声明：

  'use client';
  

  这行指令会将组件标记为客户端组件，即可正常使用所有客户端 Hooks。

2. 修复CSS无法显示的问题 #

结合页面无法正常显示的情况，大概率和服务器组件不能导入CSS有关，按以下步骤排查：

• 若是组件级模块化CSS：确保在添加了'use client';的客户端组件中导入，示例：

  'use client';
  import styles from './YourComponent.module.css';
  

• 若是全局CSS：只能在 app/layout.tsx（使用Pages Router则是pages/_app.tsx）中导入，不能在普通组件内全局导入。
• 检查CSS文件路径是否正确，确认文件名和导入路径完全匹配（注意部分系统区分大小写）。

3. 重启开发服务 #

完成上述修改后，终止当前的 npm run dev 进程，重新执行：

npm run dev

刷新页面后即可正常加载组件和样式。

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