Client vs Server Components in Next.js

Next.js uses two types of components: Client Components and Server Components.

Server Components

These run on the server and are used for fetching data.

Client Components

These run in the browser and are used for interactivity.

Example

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}