前言
閱讀本文你需要有
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]")}><ThemeProviderattribute="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
