NextJs Messenger Clone

NextJS-Messenger-Clone

由NextJS 13（应用程序路由器），MongoDB，Tailwind CSS，Pusher，Next-auth和Cloudinary制造的完全响应迅速的实时聊天应用程序。

• NextJS （13.4.x）
• 反应（18.x）
• MongoDB （6.x）
• 尾风CSS （3.x）
• 推动器（5.x）
• Next-auth （4.x）
• 打字稿（5.x）
• 生产构建脚本

现场演示

在Vercel上查看现场演示

特征

• 使用推送器的实时聊天更新
• 小组聊天
• 删除聊天历史记录
• 图像托管云
• 动态主题支持（轻度和黑暗模式）
• 支持桌面和移动屏幕

安装

设置MongoDB

1. 导航到https://www.mongodb.com/atlas/database并注册

2. 查找并选择Build a Database
   选择自由层，然后按下底部的Create
   

3. 创建用户（记下密码）
   向下滚动以Add entries to your IP Access List
   输入0.0.0.0/0 ，然后按Add Entry
   

4. Go to Databases
   

5. 单击Connect ，然后选择MongoDB for VSCode
   复制连接字符串并将其保存在记事本中
   在第3步中替换<password>用密码设置
   在连接字符串的末尾添加test （例如， connectionstring/test ）
   

设置GitHub身份验证

1. 导航到https://github.com/
   点击右上角的个人资料下拉列表
   单击Settings
   

2. 单击Developer settings
   单击OAuth Apps
   单击New OAuth App
   

3. 给您的应用程序起名字
   键入http://localhost:3020/在Homepage URL和Authorization callback URL字段中。
   单击“注册申请”
   

4. 复制Client Id并记下
   单击Generate a new client secret ，复制并记下
   

设置Google身份验证

1. 导航到https://console.cloud.google.com并创建一个新项目
   

2. 导航到新创建的项目并搜索API & Services
   

3. 转到OAuth consent screen
   单击External字段
   单击CREATE
   

4. 单击App name字段并给它一个名称
   在用户邮件字段上，选择您的电子邮件
   向下滚动到Developer contact information并输入您的电子邮件
   单击SAVE AND CONTINUE直到您处于Summary步骤
   

5. 转到Credentials
   单击CREATE CREDENTIALS
   选择OAuth client ID
   

6. 选择Web application作为应用程序类型
   向下滚动至Authorized redirect URIs ，然后添加http://localhost:3020/api/auth/callback/google
   单击CREATE
   复制CLient ID和Client Secret并记下它
   

设置云

1. 导航到https://console.cloudinary.com并登录
   转到Dashboard并记下Cloud name
   

2. 转到设置
   然后去Upload
   

3. 单击Add upload preset
   将Signing Mode更改为Unsigned
   单击Save复制新添加的预设名称并将其记下
   

设置推动器

1. 导航到https://dashboard.pusher.com/channels
   单击Create app （或Get Started ）
   给应用程序一个名字
   为后端选择Frontend和Node.js React
   创建应用程序
   

2. 转到App Keys
   记下值
   

设置项目

1. 克隆/下载回购
2. 在项目的根目录中创建一个称为.env.Local的文件，在CMD/PowerShell中键入以下内容

    cp env.example .env.local
   

3. 在.env.local文件中，从前一步中添加MongoDB，Pusher，Cloudinary，GitHub和Google键
4. yarn install以安装依赖项（如果未安装纱线，则运行npm install yarn ）
5. yarn prisma db push创建DB收藏
6. prisma generate创建Prisma客户的

用法

发展

yarn dev

• 连续构建应用程序（启用HMR）

生产

yarn build yarn start

• 构建一次应用程序（禁用HMR）到/.next/

---

所有命令

命令	描述
yarn dev	连续构建应用程序（启用HMR）
yarn build	构建一次应用程序（禁用HMR）到/.next/
yarn start	运行生产构建

参见

• 一些设计想法来自Facebook Messenger
• 该项目的一些实施想法取自Josh和Antonio
• 项目被创建隔壁应用程序