NextJS Client Components

When to use Server and Client Components?

Add interactivity and event listeners

onClick(), onChange(), etc

Use browser-only APIs

Such as Web Storage API (e.g. sessionStorage and localStorage)

Use State and Lifecycle Effects

useState(), useReducer(), useEffect(), etc

Use custom hooks that depend on state, effects, or browser-only APIs
Use React Class components

Component is the base class for the React components defined as JavaScript classes. Class components are still supported by React, but we don’t recommend using them in new code.

class Greeting extends Component {  
  render() {    
    return <h1>Hello, {this.props.name}!</h1>;  
  }
}

Reference

Rendering: Composition Patterns | Next.js