ブログ一覧に戻る

シンプルなチャットアプリ

はじめに

リアルタイムチャット機能の実装は、多くのWebアプリケーションで求められる機能ですが、WebSocketの管理やスケーラビリティの考慮など、ゼロから実装するとなかなか大変です。

今回は、**Supabase UI（shadcn CLI経由）+ Next.js** の組み合わせで、驚くほど簡単にリアルタイムチャットを実装する方法をご紹介します。

TL;DR

  • **Supabase UI** のリアルタイムチャットコンポーネントを活用
  • **shadcn CLI** で簡単にコンポーネントをインストール

    • 完成形のコードはこちらで公開しています：

    https://github.com/tnakayama256/simple-chat

    前提条件

    この記事では、以下の準備が完了していることを前提とします：

  • Supabaseアカウントの作成済み
  • Vercelアカウントの作成済み
  • Supabaseプロジェクトの作成済み
  • 以下の認証情報を取得済み：

    • - 公開URL（Project URL）

    - 匿名キー（Anon Key）

    - サービスキー（Service Role Key）

    実装手順

    1. Next.jsアプリケーションの作成

    まずは新しいNext.jsプロジェクトを作成します：

    pnpm create next-app@latest my-chat-app
cd my-chat-app

    2. 環境変数の設定

    プロジェクトのルートに `.env.local` ファイルを作成し、Supabaseの認証情報を設定します：

    NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

    **注意**: サービスロールキーは機密情報のため、クライアントサイドでは使用せず、サーバーサイドのみで使用してください。

    3. shadcn/uiの初期化

    shadcn/uiをプロジェクトに導入します：

    pnpm dlx shadcn@latest init

    プロンプトが表示されたら、お好みの設定を選択してください。TypeScript、ESLint、Tailwind CSSの設定が自動的に行われます。

    4. リアルタイムチャットコンポーネントのインストール

    Supabase UIが提供するリアルタイムチャットコンポーネントをインストールします：

    pnpm dlx shadcn@latest add https://supabase.com/ui/r/realtime-chat-nextjs.json

    このコマンド一つで、リアルタイムチャットに必要なコンポーネント(RealtimeChat)とその依存関係がすべてインストールされます。

    5. ページでの実装例

    // app/chat/page.tsx
import { RealtimeChat } from '@/components/realtime-chat'

export default async function ProtectedPage() {
  return (
    <div className="flex h-svh w-full max-w-screen-sm mx-auto items-center justify-center gap-2">
      <RealtimeChat 
        roomName="simple-chat-room" 
        username={data.user.email ?? ''} 
      />
    </div>
  )
}

    実装のポイント

    セキュリティの考慮

  • **環境変数の管理**: サービスロールキーは絶対にクライアントサイドに露出させない
  • **RLS（Row Level Security）**: Supabase側で適切なアクセス制御を設定

    • パフォーマンスの最適化

  • **リアルタイム接続**: Supabaseのリアルタイム機能により、WebSocketの管理を自動化

    • カスタマイズの余地

    `RealtimeChat`コンポーネントは、以下のようなカスタマイズが可能です：

  • ルーム名の動的変更
  • ユーザー名の表示形式
  • UIテーマのカスタマイズ（shadcn/uiのテーマシステムを活用）
  • メッセージの永続化設定

    • 注意点

  • 実際に使用する際はメッセージの永続化機能の実装やユーザ/会話の作成方法やアクセス制限も必要に応じて調整してください。
  • LLM APIを使ったAIチャットアプリの構築ではVercel AI SDKやChat SDKなどの使用を推奨します。

    • まとめ

    Supabase UIとNext.jsの組み合わせにより、複雑なリアルタイムチャット機能をわずか数ステップで実装できます。この方法なら：

  • **開発時間を大幅に短縮**できる
  • **本番環境でも安心**して使える堅牢性
  • **スケーラビリティ**も考慮済み

    • ぜひこの方法を試して、あなたのプロジェクトにリアルタイムチャット機能を追加してみてください。実装で困ったことがあれば、お気軽にご相談ください。(contact@tnakayama.com)

    参考リンク

  • 完成版リポジトリ
  • Supabase UI RealtimeChat
  • shadcn/ui公式サイト
  • Next.js公式ドキュメント
    • 次の記事