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(*)");