NextJs client component

for using client component you just need to add use client on top of the component and then you can use useState, useEffects and onClick listners

'use client'

More detailed example

import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}