Implement Dynamic Buttons with Next.js Client Components

In this lesson, we create a new component to display the likes from Supabase. This component will be interactive so it needs to be a Client Component.

Additionally, we extend our Supabase query for tweets, and join the columns from our likes table.

Lastly, we make this button dynamic by checking whether the user has previously liked this tweet. If they have not, we increment the likes by 1, otherwise, we decrement them by 1.

Code Snippets

Querying data across tables

const { data } = await supabase
  .from("tweets")
  .select("*, profiles(*), likes(*)");

Resources

• Client Component docs
• Querying across tables with supabase-js