概要

Next.jsでリアルタイムチャットアプリを構築するには、リアルタイムでメッセージの送受信を可能にする技術を使います。主に、Socket.IOやSupabaseなどが利用され、これにより効率的にリアルタイム機能を実装できます。また、ユーザー認証やデータベースの管理も組み合わせて、実用的なチャットアプリを作成できます。 本記事では、Next.jsを使ってリアルタイムチャットアプリを構築する方法を解説し、認証機能やメッセージのリアルタイム更新などの重要なポイントを紹介します。

必要な技術スタック

Socket.IO

Socket.IOは、リアルタイムでデータをやり取りできる双方向通信のライブラリです。WebSocketをベースにしており、安定した通信が可能です。Next.jsとの組み合わせにより、メッセージが送信されるたびにリアルタイムでチャット画面を更新することができます。

実装例

クライアントとサーバー間の通信をSocket.IOを使ってセットアップします。

npm install socket.io-client

次に、クライアント側でリアルタイム通信を行います。

import { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
function Chat() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    socket.on('message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });
  }, []);
  const sendMessage = (msg) => {
    socket.emit('message', msg);
  };
  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index}>{msg}</div>
      ))}
      <button onClick={() => sendMessage('Hello!')}>Send</button>
    </div>
  );
}

Supabase

Supabaseは、認証機能とリアルタイムデータベースの管理を提供するBaaS（Backend as a Service）です。Supabaseのリアルタイム機能を使えば、メッセージが投稿されたときにすぐにチャット画面に反映されます。

メッセージのリアルタイム取得

Supabaseのpostgres_changesイベントを利用して、データベースに新しいメッセージが追加されるたびにリアルタイムで通知を受け取ります。

import { useEffect, useState } from 'react';
import { supabase } from './supabaseClient';
function RealtimeChat() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    const channel = supabase
      .channel('public:chats')
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'chats' }, (payload) => {
        setMessages((prev) => [...prev, payload.new]);
      })
      .subscribe();
    return () => {
      supabase.removeChannel(channel);
    };
  }, []);
  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index}>{msg.content}</div>
      ))}
    </div>
  );
}

認証機能

リアルタイムチャットにおいてユーザー認証は重要です。Supabase Authを利用すれば、簡単に認証機能を追加できます。例えば、メールやOAuthプロバイダー（Google、GitHubなど）を使ってユーザー認証を実装可能です。

チャットUIの作成

Next.jsのコンポーネントを使って、メッセージリストや入力フィールドを作成します。以下は、基本的なチャットUIの例です。

function ChatUI({ chatData }) {
  return (
    <div>
      <p>{chatData.name}: {chatData.message}</p>
    </div>
  );
}
export default function ChatPage() {
  return (
    <div>
      <h1>チャットルーム</h1>
      <ChatUI chatData={{ name: "ユーザーA", message: "こんにちは！" }} />
    </div>
  );
}

まとめ

Next.jsを使ったリアルタイムチャットアプリの構築は、Socket.IOやSupabaseを組み合わせることでスムーズに実装できます。リアルタイムでのメッセージ送信、データベースの管理、認証機能を統合することで、ユーザーにとって使いやすいチャットアプリを開発可能です。