1. 15
    Implement Dynamic Buttons with Next.js Client Components
    4m 56s

Implement Dynamic Buttons with Next.js Client Components

InstructorJon Meyers

Share this video with your friends

Send Tweet

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