Building Real-Time Apps with Supabase and Next.js

Supabase makes real-time features surprisingly simple. Let's build a live chat.

Setup Supabase

npm install @supabase/supabase-js

// lib/supabase.ts
import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

Database Schema

CREATE TABLE messages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id),
  content TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT now()
);

Real-Time Subscription

"use client"

import { useEffect, useState } from "react";
import { supabase } from "@/lib/supabase";

export default function Chat() {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    // Subscribe to new messages
    const channel = supabase
      .channel("messages")
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "messages" },
        (payload) => {
          setMessages(prev => [...prev, payload.new]);
        }
      )
      .subscribe();
    
    return () => {
      supabase.removeChannel(channel);
    };
  }, []);
  
  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.content}</div>
      ))}
    </div>
  );
}

Sending Messages

async function sendMessage(content: string) {
  const { error } = await supabase
    .from("messages")
    .insert({ content });
  
  if (error) console.error(error);
}

Conclusion

Supabase + Next.js = Real-time magic with minimal code!