Deviopath › Next.js

Like Button

Easy · Client Components

In the App Router every component is a Server Component by default. Server Components run only on the server, so they cannot use state (useState) or event handlers (onClick). To make a component interactive, put the "use client" directive at the very top of the file: it marks the file as a Client Component that also runs in the browser.

Make the like button work:

- Add "use client" at the top.

- The button starts as Like (0).

- Every click adds one: Like (1), Like (2), ...

Next: Navigate From Code