NextJS chat app
1.0.0
ライブの例：https：//next-js-chat-app.vercel.app
ステップバイステップガイド：https：//able.com/blog/realtime-chat-app-nextjs-vercel
これは、メッセージングプラットフォームとして適切に使用するnext.jsを使用したデモチャットアプリケーションです。
それは次の使用を示しています：
プロジェクトは次のコンポーネントを使用します。
Next.jsはVercelのReactフレームワークです。これは、サーバーサイドレンダリング、サーバーレス関数、シームレスなホスティングを備えた静的Webアプリケーションを構築するために使用されます。これは、あなたがすでに持っている反応の知識を取り入れ、いくつかの構造と慣習を導入するフレームワークです。
エンドユーザーに完全なリアルタイム機能を直接提供するために、一連の統合サービスを備えたリアルタイムのパブ/サブメッセージングプラットフォームです。
Vercelはホスティングプラットフォームであり、次のようにゼロから構築されており、next.jsアプリをホストし、サーバーレス機能を使用します。
Reactは、独自の状態を管理するカプセル化されたコンポーネントを使用して、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。
このウォークスルーで構築するアプリのUI
ブラウザで実行されるリアルタイムチャットアプリを構築します。 next.js Create-Next-Appテンプレートの上に構築され、メッセージを送信および受信するために適切に使用するReactコンポーネントが含まれます。また、次のように接続するために使用されるnext.jsサーバーレス関数を書きます。
このアプリを構築および展開するには、次のことが必要です。
また、APIキーがAblyからAuthenticeを使用して認証する必要があります。 APIキーを取得するには、適切なアカウントを作成したら：
.envというファイルを作成します。 ABLY_API_KEY=your-ably-api-key:goes-herenpm installを実行します。npm run devを実行します。Next.js Devサーバーがスピンアップし、デモチャットアプリケーションが表示されます。
Vercel開発サーバーとして使用し、パイプラインを構築しています。
next.jsを生産に展開する最も簡単な方法は、next.jsの作成者からvercelプラットフォームを使用することです。 Vercelは、Static＆Jamstackの展開とサーバーレス機能をサポートするグローバルCDNを備えたオールインワンプラットフォームです。 -NEXT.JSドキュメント
新しいチャットアプリをVercelに展開するには、次のことが必要です。
ABLY_API_KEYを環境変数として追加しますこの例を拡張できる方法はいくつかあります。
現在、このデモにはチャットの履歴はありません。チャットに参加した後に出てくるメッセージのみが表示されます。最大2分間の履歴でAblyの巻き戻し機能を使用して、または最大48時間の有料アカウントを使用して、このデモを拡張できます。
チャットメッセージで送信されるユーザー名はありません。このデモを拡張して、ユーザー名入力ボックスを導入し、送信中に現在のユーザー名をメッセージに追加することができます。
デモは、ランダムに生成されたabblyクライアントIDを一意の識別子として使用します。これは、メッセージを送信した「私」または「他の誰か」であるかどうかを検出する方法です。
