NextJs Messenger Clone

nextjs-messenger-clone

NextJS 13（アプリルーター）、MongoDB、Tailwind CSS、Pusher、Next-Auth、Cloudinaryで作成された完全にレスポンシブなリアルタイムチャットアプリ。

• nextjs （13.4.x）
• React （18.x）
• mongodb （6.x）
• Tailwind CSS （3.x）
• プッシャー（5.x）
• Next-auth （4.x）
• タイプスクリプト（5.x）
• 生産ビルドスクリプト

ライブデモ

Vercelのライブデモをご覧ください

特徴

• プッシャーとのリアルタイムチャット更新
• グループチャット
• チャット履歴を削除します
• Cloudinaryを使用した画像ホスティング
• ダイナミックテーマのサポート（明るいモードとダークモード）
• デスクトップ画面とモバイル画面の両方をサポートします

インストール

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を選択します
   接続文字列をコピーしてメモ帳に保存します
   <password>ステップ3に設定したパスワードに置き換えます
   接続文字列の最後にtestを追加します（ connectionstring/test ）
   

GitHub認証をセットアップします

1. https://github.com/に移動します
   右上のプロフィールドロップダウンをクリックします
   Settingsをクリックします
   

2. Developer settingsをクリックします
   OAuth Appsをクリックします
   New OAuth Appをクリックします
   

3. アプリに名前を付けます
   入力http://localhost:3020/ in Homepage URL and 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のReactおよびNode.jsバックエンドのnode.jsを選択します
   アプリを作成します
   

2. App Keysに移動します
   下の値を記録します
   

セットアッププロジェクト

1. クローン/ダウンロードリポジトリ
2. プロジェクトのルートディレクトリに.env.localというファイルを作成します。CMD/PowerShellで以下を入力します

    cp env.example .env.local
   

3. .env.localファイルの内部に、前の手順からmongodb、pusher、cludynary、github、googleキーを追加します
4. yarn install依存関係をインストールする（YARNがインストールされていない場合はnpm install yarnを実行する）
5. yarn prisma db push DBコレクションを作成します
6. prisma generate

使用法

発達

yarn dev

• 継続的にアプリをビルドする（HMRが有効になっている）

生産

yarn build yarn start

• 一度（hmr disabled）to /.next/をビルドする

---

すべてのコマンド

指示	説明
yarn dev	継続的にアプリをビルドする（HMRが有効になっている）
yarn build	一度（hmr disabled）to /.next/をビルドする
yarn start	生産ビルドを実行します

参照してください

• Facebook Messengerからいくつかのデザインのアイデアが取られました
• このプロジェクトのいくつかの実装のアイデアは、ジョシュとアントニオから取得されています
• プロジェクトは、create-next-appでブートストラップされました