前言
阅读本文你需要有
Next.js 基础
React 基础
Prisma 基础
tailwind 基础
MySql基础
准备工作
打开网站 https://ui.shadcn.com/docs
这不是一个组件库。它是可重用组件的集合,您可以将其复制并粘贴到应用中。
打开installation 选择Next.js 也就是此页面
项目安装
npx create-next-app@latest my-app --typescript --tailwind
出现Success即为成功
npx shadcn-ui@latest init
这下就可以启动
npm run dev
开始写代码
更改下global.css,使文档的根元素都会占据视口高度的100%。确保网页在不同设备和屏幕尺寸下都能有一致的布局表现,而不会出现不必要的滚动条。
加入以下代码
//:root是css的伪类选择器 确保这些样式能够应用到整个页面中的所有元素。
html,body,:root{
height:100%;
}
(main)–> (routes) 是一个工作习惯
可以将routes和layout分开
Clerk权限控制
https://clerk.com/ 使用Clerk来进行权限控制
进行注册 QQ邮箱不能使用 需要使用网易邮箱
根据文档一步一步来
安装
npm install @clerk/nextjs
创建环境变量.env文件 在文件中添加内容
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_d29uZHJvdXMtY29uZG9yLTM0LmNsZXJrLmFjY291bnRzLmRldiQ
CLERK_SECRET_KEY=sk_test_n19eZwEzX9NUaONd3BRMhUWqKeZZn9lHxQDEY3IQ7Q
添加middleware.ts中间件
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};
在全局layout中使用ClerkProvider包裹
return (
<ClerkProvider>
<html lang="en">
<body className={font.className}>{children}</body>
</html>
</ClerkProvider>
);
}
创建目录结构
创建文件夹(auth)
,这种被小括号包裹的文件夹,这种命名约定并不会直接影响路由系统,而是用于特定的用途或者命名风格。比如说这里就是用来表示特定的文件 而不影响next路由系统
创建文件夹[[...sign-in]]
与[[...sign-up]]
[[...sign-in]]
是 Next.js 中用于创建动态路由的一种特殊语法。这种语法允许你处理带有多个参数的动态路由,其中 ...
表示匹配零个或多个路径段。
最后格式是这样
并在sign-in中的page.tsx中写入内容
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUp />;
}
在sign-un中的page.tsx中写入内容
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUp />;
}
并在.env中加入内容
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
让我们来看看效果 localhost:3000/sign-up
接下来创建主文件夹(main)并在其中page.tsx中创建 <UserButton />
组件https://clerk.com/docs/components/user/user-button#user-button-component
这个组件支持即时帐户切换,无需重新加载整个页面。
😬😬按钮只会在登陆后显示
// app/(main)/(routes)/page.tsx
import { UserButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<UserButton afterSignOutUrl="/"/>
</div>
);
}
安装主题
https://ui.shadcn.com/docs/dark
安装
npm i next-themes
在components文件夹中创建文件夹providers中创建theme-provider.tsx 复制内容
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
进入全局layout文件将body中children文件包裹
import { ThemeProvider } from "@/components/providers/theme-provider";
<html lang="en" suppressHydrationWarning>
<body className={cn(font.className,"bg-white dark:bg-[#313338]")}>
<ThemeProvider
attribute="class"
defaultTheme="light"
// forcedTheme="light"
enableSystem={false}
storageKey="discord-theme"
>
{children}
</ThemeProvider>
</body>
</html>
);
再搞个切换dark模式与light模式的切换按钮
在components中创建文件
// components/mode-toggle.tsx
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function ModeToggle() {
const { setTheme } = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
因为没有安装dropdownmenu报错
npx shadcn-ui@latest add dropdown-menu
拿下
接下来安装prisma
npm i -D prisma
初始化
npx prisma init