How to Use use client Directive in Next.js for Client Components

In Next.js, add 'use client' as the very first line in a component file to mark it as a client component. This enables React hooks and browser-only APIs inside that component while Next.js treats it differently during rendering.

Syntax

The 'use client' directive is a special string placed at the top of a React component file in Next.js. It tells Next.js to treat the component as a client component, allowing use of hooks like useState and browser APIs.

Place it exactly as the first line before any imports or code.

javascript

'use client';

import React, { useState } from 'react';

export default function MyClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Example

This example shows a simple counter component using the 'use client' directive. It uses React's useState hook to update the count on button clicks, which only works in client components.

javascript

'use client';

import React, { useState } from 'react';

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

  return (
    <main style={{ padding: '1rem', fontFamily: 'Arial, sans-serif' }}>
      <h1>Counter Example</h1>
      <button onClick={() => setCount(count + 1)} style={{ fontSize: '1.5rem', padding: '0.5rem 1rem' }}>
        Count: {count}
      </button>
    </main>
  );
}

Output

A webpage showing a heading 'Counter Example' and a button labeled 'Count: 0'. Clicking the button increments the number displayed.

Common Pitfalls

• Not placing 'use client' as the very first line: It must be the first line in the file, before imports or any code.
• Using server-only APIs inside client components: Client components run in the browser, so server-only code like database calls will fail.
• Forgetting to add 'use client' when using hooks: React hooks like useState only work in client components, so missing the directive causes errors.

javascript

'use client'; // Correct placement

// Wrong: placing after imports
import React from 'react';
'use client'; // This will not work properly

// Wrong: using server API in client component
'use client';

// import fs from 'fs'; // Server-only module

export default function ClientComp() {
  // This will cause error because fs is server-only
  // const data = fs.readFileSync('/path');
  return <div>Data loading not supported in client component</div>;
}

Quick Reference

Tips for using 'use client' directive in Next.js:

• Always put 'use client' as the first line in your component file.
• Use it only for components that need React hooks or browser APIs.
• Keep server logic separate in server components without the directive.
• Client components can import other client components but not server components.

Key Takeaways

Place 'use client' as the very first line in a component file to mark it as a client component.

Use the directive when you need React hooks or browser APIs inside a Next.js component.

Do not mix server-only code inside client components marked with 'use client'.

Client components enable interactive UI but increase client bundle size, so use them only when needed.

Server components (without 'use client') are best for static or server-only logic.