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
• 項目被創建隔壁應用程序