Mastering Real-Time Sync with Supabase

Supabase makes it incredibly simple to add real-time features to your web applications by leveraging PostgreSQL's replication functionality under the hood. In this guide, we'll build a live subscription feed in Next.js.

1. Enable Realtime on your Table

First, make sure you check the "Enable Realtime" option on your database table in the Supabase Dashboard.

2. Subscribe in React

Using the Supabase JS library, you can listen to database changes in real-time:

const channel = supabase
  .channel('table-db-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'messages' },
    (payload) => {
      console.log('Change received!', payload);
    }
  )
  .subscribe();

This keeps your application state automatically synchronized with the database!