Building a Real-time Dashboard with Next.js and Supabase

Learn how to build a production-ready real-time dashboard that updates instantly when data changes.

Tech Stack

• Next.js 14 with App Router
• Supabase for database and real-time
• Tailwind CSS for styling
• shadcn/ui for components

Setting Up Supabase Real-time

First, enable real-time on your table:

ALTER TABLE metrics REPLICA IDENTITY FULL;

Then subscribe to changes:

useEffect(() => {
const channel = supabase
.channel("metrics")
.on("postgres_changes", {
event: "*",
schema: "public",
table: "metrics"
}, (payload) => {
setMetrics(current => [...current, payload.new]);
})
.subscribe();

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

Dashboard Components

Create reusable chart components that react to real-time data updates.

Conclusion

With Next.js and Supabase, building real-time features is straightforward and scalable.