简介

NextUI是一个基于Next.js的UI库，它提供了丰富的组件和样式，帮助开发者快速构建现代化的Web应用程序。个人感觉还是挺好用的，这里记录一下如何手动安装配置。

为啥要手动配置安装？主要是使用NextUI的cli工具安装的话，会出现一些问题，而且有一些老项目以后页会使用NextUI的。

安装

创建项目

这里我想手动创建一个项目用来演示，使用npx create-next-app命令来创建项目。

项目没什么特别的，只要记得选上tailwind就可以了

安装NextUI

npm install @nextui-org/react
# 或者
yarn add @nextui-org/react

配置 Tailwind CSS

/** @type {import('tailwindcss').Config} */
const {nextui} = require("@nextui-org/react");
export default {
content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
],
theme: {
    extend: {
    colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
    },
    },
},
darkMode: "class",
plugins: [nextui()]
};

设置 NextUIProvider

在你的 Next.js 应用的根组件中，使用NextUIProvider来包裹你的应用。通常，这可以在pages/_app.js或pages/_app.tsx中完成：

import "@/styles/globals.css";
import {NextUIProvider} from "@nextui-org/react";
import {ThemeProvider as NextThemesProvider} from "next-themes";
export default function App({ Component, pageProps }) {
return (
    <NextUIProvider>
        <NextThemesProvider attribute="class" defaultTheme="dark">
        <Component {...pageProps} />
        </NextThemesProvider>
    </NextUIProvider>
);
}

这里，我使用next-themes来实现主题切换。defaultTheme="dark"可以设置默认的主题样式。

使用组件

修改index.js内容：

import {Button} from "@nextui-org/react";


export default function Home() {
return (
    <div>
        <Button>Click me</Button>
    </div>
);
}

运行项目，就可以看到效果了。

总结

NextUI的安装配置还是比较简单的，而且这是一个非常漂亮的UI库。免费的组件基本上能满足日常的需求。