Next.js - use client Directive

The "use client" Directive

The "use client" is a Next.js directive used to specify that a component should be rendered on the client-side. Client side components are run in the user's browser, and are not bundled with the server-side code while application build. You can make client side component for

• Creating interactive UI that require client-side JavaScript
• Component that include state management
• Component that include event handling, and access to browser APIs.

Example

To make a component render on the client-side, add the "use client" directive at the top of the component file. See the code below.

// /counter/page.tsx
"use client"

import { useState } from 'react'

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

  return (
    <div>
      <h1>Hello, world!</h1>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

Output

The image below shows the output of the code above. You can see that when we open counter page, a new JavaScript file is fetched from the server.

Create Client Component inside Server Component

Next.js also allows you to create client components inside server components. By combining client and server components, you can create application that optimized for performance and interactive for the user. For example, you can create a server component that fetches data from an API and inside that add a button as a client component, so that the button will be interactive according to the user's states.

Example

In the code below, we have a server component which displays a header element. Inside that we have imported a client component that displays a counter element. See the code below.

import Header from './header'
import Counter from './counter' // This is a Client Component
 
export default function Page() {
  return (
    <div>
        <Header />
        <Counter />
    </div>
  )
}

Output

The image below shows the output of the code above. You can see that when we open counter page, a new JavaScript file is fetched from the server.