Next.js 13 App目录下使用组件库的更优方案探讨

下面是几个不用逐个封装重命名组件的实用方法：

• 直接在使用组件的文件中添加"use client"
  这是最省心的方式——只要你在某个需要用到第三方客户端组件的文件（比如页面、局部组件）顶部加上"use client";，之后就能正常导入并使用组件库的组件，完全不需要修改组件名，VS Code的自动导入功能也能正常识别。示例代码：

  "use client";
  import { Button, Input } from 'antd';
  
  export default function UserForm() {
    return (
      <div className="form-container">
        <Input placeholder="用户名" />
        <Button type="primary" htmlType="submit">提交</Button>
      </div>
    );
  }
  

• 创建统一的客户端组件导出入口
  如果你不想在多个文件里重复加"use client"，可以专门建一个文件作为第三方客户端组件的统一导出层，只在这个文件里加一次"use client"，然后批量导出需要的组件。这样VS Code自动导入时会优先指向这个导出文件，不用手动调整组件名。示例：

  1. 创建components/client-libs.tsx文件：

     "use client";
     
     // 按需导出第三方组件
     export { Button, Input, Card } from 'antd';
     export { Dialog, Tooltip } from '@mui/material';
     export { Dropdown } from 'react-bootstrap';
     

  2. 在其他文件中直接从这个入口导入：

     import { Button, Dialog } from '@/components/client-libs';
     
     export default function Page() {
       return (
         <div>
           <Button>打开弹窗</Button>
           <Dialog open={true}>弹窗内容</Dialog>
         </div>
       );
     }
     

• 优先选择适配App Router的组件库版本
  现在不少主流组件库已经针对Next.js 13 App Router做了适配（比如Ant Design 5.x、MUI 5.14+），这类组件库的部分组件会自动处理客户端渲染逻辑，无需手动添加"use client"。如果你的组件库有适配版本，可以优先升级使用，进一步简化流程。

内容的提问来源于stack exchange，提问作者Vitor Figueredo Marques