このハンズオンではReact QueryとSocket.IOを活用したリアルタイムチャットアプリを一から構築する方法を学びます。無限ページングの実装から始まり、リアルタイムのメッセージ交換、さらにはユーザーブロック機能や相手ユーザーのオンライン・オフラインステータス表示まで、幅広い機能をカバーしています。

本ハンズオンでは以下の機能に焦点を当てています。
1. ReactQueryを利用した無限ページング
　効率的でシームレスなユーザー体験を実現します。
2. Socket.IOを利用したリアルタイムチャット
　リアルタイムでのメッセージングを可能にし、コミュニケーションの質を高めます。
3. 相手ユーザーのオンライン・オフラインステータスの表示
　相手ユーザーがオンラインかオフラインかをリアルタイムに把握できるようにします。
4. ユーザーブロック機能
　安全で快適なチャット環境を提供します。
5. リンクカードの作成
　メッセージ内で共有されるURLから自動的にリンクカードを生成し、より視覚的な情報を提供します。

このハンズオンではリアルタイム通信アプリに興味のある方におすすめです。アプリ作成に取り組みながら、実用的なスキルと知識を身につけていきましょう！

チャットアプリを作ろう！ 【Next.jsハンズオン🚀】

完成イメージ

セットアップ

ユーザー登録画面を作成しよう！

ログイン画面を作成しよう！

認証関係の設定

サイドバーの作成

ヘッダーの作成

メッセージページの準備

メッセージページのヘッダーを作成する

メッセージページの一覧を作成する

初期データの挿入（読み飛ばし可）

スクロールした時のイベントを登録する

メッセージ入力コンポーネントの作成

Socket.IOのセットアップ

サーバープッシュの実装

特定のユーザーにのみメッセージを送信できるようにしよう！