How to Implement the `use client` Directive in Next.js for Server and Client Components

Add 'use client' as the very first line of any file containing interactive React components to mark it as a Client Component boundary in the Next.js App Router.

Next.js 13+ introduces a dual-component architecture in the App Router, splitting React components into Server Components (default) and Client Components (interactive). According to the vercel/next.js source code, the 'use client' directive creates the boundary between these rendering environments, determining which code executes on the server versus the browser.

Understanding the use client Directive Boundary

The directive acts as a file-level marker that signals the Next.js bundler to treat the entire module as client-only code.

File-Level Declaration Rules

In docs/01-app/03-api-reference/01-directives/use-client.mdx, the documentation specifies that the literal string 'use client' must appear before any imports or other code. When placed at the top of a file:

• All exports become client-only – The code is bundled into the client bundle and sent to the browser
• Browser APIs are accessible – You can use useState, useEffect, event handlers, and DOM APIs
• Server-only features are excluded – Async server components, direct database access, and server-only modules cannot be used

Module Graph Implications

As documented in docs/01-app/04-glossary.mdx, Server Components can import and render Client Components, but cannot import client-only modules themselves. When a Server Component imports a Client Component file, the bundler treats it as a leaf in the module graph, including it only in the client bundle while keeping the parent server-only.

Where to Place the use client Directive in Your Project

Only the entry-point file that directly exports a client component needs the directive. Intermediate helper files imported exclusively by the client component can remain server-only, reducing bundle size.

app/
 ├─ page.tsx          ← Server Component (no directive)
 ├─ header.tsx        ← Server Component (no directive)
 └─ counter.tsx       ← Client Component (starts with 'use client')

In this structure from the Next.js documentation:

• page.tsx fetches data on the server and composes static markup
• counter.tsx runs only in the browser, handling UI state and events

Implementing Client Components with Proper Prop Serialization

When passing data from Server Components to Client Components, props must be serializable. Functions, non-JSON values, and complex objects cannot cross the server-client boundary.

Basic Client Component Example

// app/components/Counter.tsx
'use client'               // ← declares this file as a client entry point

import { useState } from 'react'

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

Source: docs/01-app/03-api-reference/01-directives/use-client.mdx

Server Component Composition

// app/page.tsx   (Server Component – no 'use client')
import Header from './Header'          // Server‑only component
import Counter from './components/Counter' // Client Component

export default function Page() {
  return (
    <main>
      <Header />
      {/* Counter runs in the browser */}
      <Counter />
    </main>
  )
}

Source: docs/01-app/03-api-reference/01-directives/use-client.mdx

Invalid Prop Serialization Example

'use client'

export default function Bad({ onClick }) {   // ❌ onClick is a function → not serializable
  return <button onClick={onClick}>Click</button>
}

Source: docs/01-app/03-api-reference/01-directives/use-client.mdx

To fix this, pass only JSON‑compatible data (strings, numbers, booleans, plain objects, arrays). If you need to trigger a server action, use the use server directive in a separate file.

Architectural Patterns for Server-Client Interaction

Keep the 'use client' directive as close to the leaf nodes as possible. This maximizes the amount of server-rendered content while minimizing client bundle size.

// app/components/Toolbar.tsx
'use client'
export default function Toolbar() { /* … */ }

// app/components/Sidebar.tsx
'use client'
export default function Sidebar() { /* … */ }

// app/layout.tsx (Server Component)
import Toolbar from './components/Toolbar'
import Sidebar from './components/Sidebar'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Toolbar />
        <Sidebar />
        {children}
      </body>
    </html>
  )
}

By placing 'use client' only on the leaf components (Toolbar, Sidebar), the rest of the tree stays server‑only, keeping the client bundle minimal while preserving interactivity where needed.

Summary

• Add 'use client' once at the top of the file that directly exports a client component, before any imports
• Keep the directive as close to the leaf as possible; parent components should remain Server Components
• Ensure props passed from Server to Client Components are serializable (no functions or non-JSON values)
• Server Components can import Client Components, but cannot import client-only modules
• Only entry-point files need the directive; helper files imported exclusively by client components can remain server-only

Frequently Asked Questions

Where exactly should I place the use client directive in a Next.js file?

Place 'use client' as the very first line of the file, before any import statements or other code. The directive must appear at the top of the module to properly signal the bundler that all exports in this file are client-only components.

Can I pass functions as props from a Server Component to a Client Component?

No, you cannot pass functions or any non-serializable data as props from Server Components to Client Components. Props must be JSON-serializable (strings, numbers, booleans, plain objects, arrays). If you need to handle events, define the event handlers inside the Client Component itself, or use the use server directive to create server actions that can be called from the client.

Do I need to add use client to every file in my component tree?

No, you should only add 'use client' to the specific files that export components requiring client-side interactivity (state, effects, event handlers). Keep the directive as close to the leaf nodes as possible. Intermediate helper files that are only imported by client components do not need the directive and can remain server-only, which helps reduce the client bundle size.

What happens if I import a client-only module into a Server Component?

If you attempt to import a client-only module (such as a file containing browser-specific APIs or the 'use client' directive) directly into a Server Component, Next.js will throw an error. Server Components can only import Client Components as React elements in JSX, not as modules containing client-only code. To fix this, ensure that any client-only logic is encapsulated in a file marked with 'use client' and only rendered as a component within the Server Component's JSX.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}