%20(2).svg)
项目简介
本项目是一个全栈项目，基于 React、NextJS、TailwindCSS 以及 Prisma 技术构建，目标是实现 Netflix 官网的部分功能。项目集成多种技术，借助 NextAuth 实现前后端权限校验与第三方账户登录，利用 TailwindCSS 完成响应式布局与动效设计，通过 Prisma 连接 MongoDB 进行数据管理。项目网址为：https://netflix-clone-sigma-swart-93.vercel.app/ ，测试账号：test@test ，密码：test。
项目的主要特性和功能
- 技术选型：采用 Typescript 和 NextJS 初始化项目，发挥 NextJS 的 SSR 特性和开箱即用的优势。
- 数据库连接：通过 Prisma 连接 MongoDB，支持数据的增删改查操作。
- API 设计：设计并实现 API 与 Controllers，提供“增加喜爱项”和“移除喜爱项”等功能。
- 界面设计：使用 TailwindCSS 实现响应式布局及细节动效，提升用户体验。
- 数据请求：运用 React SWR 进行数据请求与重新验证。
- 状态管理：使用 Zustand 进行状态管理，如控制 Modal 组件状态。
安装使用步骤
前提条件
假设用户已下载本项目的源码文件，且安装了 Node.js 和 npm。
安装依赖
在项目根目录下，执行以下命令安装项目依赖：
bash
npm install
Prisma 初始化
- 安装 Prisma CLI 和 Prisma Client：
bash npm install -D prisma npm install @prisma/client - 安装 VSCode 插件：
Prisma.prisma - 运行初始化命令，指定数据库为 MongoDB：
bash npx prisma init --datasource-provider mongodb - 创建 Prisma Client 实例：
在
libs/prismadb.ts中创建 Prisma Client 实例，代码如下： ```ts import { PrismaClient } from '@prisma/client'
const client = global.prismadb || new PrismaClient() if (process.env.NODE_ENV === 'production') global.prismadb = client
export default client
5. 定义 `schema.prisma`：
参考[文档](https://authjs.dev/reference/adapter/prisma)添加第三方账户登录所需的 schema 字段，并添加业务数据表字段 Movie。
6. 初始化 MongoDB 云数据库：
- 访问 [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register) 创建用户、project 和 cluster。
- 连接时设置 IP 地址，并选择 VSCode 连接方式。
- 将 url 复制到 `.env` 文件的 `DATABASE_URL` 变量。
- 执行同步数据库命令：bash
npx prisma db push
```
配置环境变量
在 .env 文件中配置以下环境变量：
plaintext
DATABASE_URL=mongodb+srv://[USERNAME]:[PASSWORD]@cluster-netflix-clone.tnttogg.mongodb.net/[DATABASENAME]
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_JWT_SECRET=your_nextauth_jwt_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
运行项目
在项目根目录下，执行以下命令启动开发服务器：
bash
npm run dev
打开浏览器，访问 http://localhost:3000 即可查看项目。
部署项目
可以使用 Vercel 进行项目部署，步骤如下：
1. 设置环境变量。
2. 重写 build 命令：npx prisma generate && next build
3. 完成部署。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】