shadcn-ui 有 nextjs13 中的使用

23 min read

shadcn-ui 是一个 UI 组件库，可以在 Next.js 13 中使用。下面是在 Next.js 13 中使用 shadcn-ui 的步骤：

  1. 首先，确保你已经安装了 Next.js 13 和 React 17，并已经创建了一个 Next.js 项目。

  2. 在项目的根目录中，通过以下命令安装 shadcn-ui：

    npm install shadcn-ui

  3. 创建一个新的文件夹 components，并在其中创建一个新的文件 Header.js。

  4. 在 Header.js 文件中，导入需要的组件和样式，并创建一个自定义的头部组件，用于展示页面的标题等内容。例如：

    import React from 'react';
import { Header as ShadcnHeader, Brand } from 'shadcn-ui';

const Header = () => {
  return (
    <ShadcnHeader>
      <Brand>My App</Brand>
    </ShadcnHeader>
  );
};

export default Header;

  5. 在你的页面组件中，例如 pages/index.js，导入并使用 Header 组件。例如：

    import React from 'react';
import Header from '../components/Header';

const Home = () => {
  return (
    <div>
      <Header />
      <h1>Welcome to my app</h1>
      {/* 其他页面内容 */}
    </div>
  );
};

export default Home;

  6. 运行你的 Next.js 项目，通过以下命令启动开发服务器：

    npm run dev

    现在，你应该能够看到你的 Next.js 应用程序，并在顶部看到使用 shadcn-ui 创建的自定义头部组件。

这是一个简单的示例，演示了如何在 Next.js 13 中使用 shadcn-ui。你可以根据自己的需要进一步扩展和自定义组件，以及在其他页面中使用 shadcn-ui 的其他组件。