nextjs+shadcn学习

1、安装nextjs

创建文件夹next-shadcn

在文件夹中执行

npx create-next-app@latest . --typescript --tailwind --eslint

安装后，跑起来

2、安装shadcn

在刚才目录下，运行命令

npx shadcn-ui@latest init

目录中会增加两个目录

components 和lib

替换原始page.tsx文件

 export default function Home() {
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
}

3、安装一个button组件

npx shadcn-ui@latest add button

4、增加一个自定义样式

myButton: "p-2 bg-orange-400",

page.tsx代码

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <>
      <h1>Hello World</h1>
      <Button variant="outline">Button</Button>
      <Button variant="myButton">Button</Button>
    </>
  );
}

界面效果

学习资源：https://www.freecodecamp.org/news/shadcn-with-next-js-14/#how-to-install-next-js