Next.js 13.1（app目录）可用React组件库及useState报错解决

完全可以在不丢失服务器组件优势的前提下使用React组件库，核心是理清客户端组件和服务器组件的边界，下面直接解决你的问题：

解决useState相关报错 #

你遇到的报错是因为App目录下的组件默认是服务器组件，这类组件不能使用useState、useEffect等客户端专属的React Hooks。而你导入的UI组件依赖了这些客户端API，所以需要把使用该组件的文件标记为客户端组件：

• 在使用React组件库的组件文件顶部添加'use client'指令，这会将该组件及其子组件（除非子组件单独标记为服务器组件）转为客户端组件，就能正常使用客户端API了。

示例代码：

'use client';

import { useState } from 'react';
import SomeUILibraryBtn from 'your-ui-library/button';

export default function InteractiveButton() {
  const [clickCount, setClickCount] = useState(0);
  return (
    <SomeUILibraryBtn onClick={() => setClickCount(prev => prev + 1)}>
      点击次数: {clickCount}
    </SomeUILibraryBtn>
  );
}

保留服务器组件优势的正确姿势 #

不要把整个页面都标记为客户端组件，否则会丢失服务器组件的核心优势（比如服务器端数据预取、静态渲染、减少客户端JS体积）。正确的做法是：

• 把数据获取、静态内容渲染等不需要交互的逻辑放在未标记'use client'的服务器组件中
• 把**需要交互的UI部分（即用到组件库的部分）**单独封装成客户端组件，再导入到服务器组件中

示例目录结构：

app/
  page.js          # 服务器组件：负责数据获取和静态内容渲染
  components/
    InteractiveCard.js  # 客户端组件：使用React组件库处理交互

服务器组件page.js示例：

// 无需标记'use client'，默认是服务器组件
import InteractiveCard from './components/InteractiveCard';

// 服务器端数据预取（仅在服务器执行）
async function getPostData() {
  const res = await fetch('https://api.example.com/posts/1');
  return res.json();
}

export default async function HomePage() {
  const post = await getPostData();
  return (
    <div className="container">
      {/* 服务器渲染的静态内容 */}
      <h1>{post.title}</h1>
      <p>{post.summary}</p>
      {/* 导入客户端组件处理交互 */}
      <InteractiveCard postId={post.id} />
    </div>
  );
}

注意事项 #

• 大部分React UI组件库的组件都依赖客户端API，所以使用它们的文件都需要添加'use client'指令
• 尽量缩小客户端组件的范围，只把需要交互的局部封装成客户端组件，让页面的大部分内容保持服务器渲染的优势

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