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

news2024/9/21 22:32:54

前言

阅读本文你需要有

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>

)

}