How to set up Supabase realtime subscriptions in Server Components?

npm install @supabase/supabase-js @supabase/ssr @supabase/auth-helpers-nextjs
      

NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
      

Database → Replication → Enable 'posts' table
      

import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import RealtimePosts from './RealtimePosts';

export default async function PostsPage() {
  const supabase = createServerComponentClient({ cookies });
  const { data: initialPosts } = await supabase
    .from('posts')
    .select('*')
    .order('created_at', { ascending: false });

  return <RealtimePosts initialPosts={initialPosts || []} />;
}
      

'use client';
import { useEffect, useState } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

interface Post { id: string; title: string; created_at: string; }

export default function RealtimePosts({ initialPosts }: { initialPosts: Post[] }) {
  const [posts, setPosts] = useState(initialPosts);
  const supabase = createClientComponentClient();

  useEffect(() => {
    const channel = supabase
      .channel('posts')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }, 
        payload => payload.eventType === 'INSERT' 
          ? setPosts(p => [payload.new as Post, ...p])
          : setPosts(p => p.filter(post => post.id !== payload.new.id))
      )
      .subscribe();

    return () => supabase.removeChannel(channel);
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id} className="p-4 border-b">
          <h3>{post.title}</h3>
          <p>{new Date(post.created_at).toLocaleString()}</p>
        </div>
      ))}
    </div>
  );
}