Course lesson

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.

Duration
5 min
Access
Free
Transcript
Retained from source evidence

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