当前位置：首页 > news >正文

全栈 Discord 克隆：Next.js 13、React、Socket.io、Prisma、Tailwind、MySQL笔记(一)

news 2025/7/7 1:23:42

前言

阅读本文你需要有

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>)}