Can You Import Client Component in Server Component in Next.js?

Yes, you can import a client component inside a server component in Next.js by marking the client component with 'use client' at the top. The server component can then render the client component as a child, enabling interactivity where needed.

Syntax

To import a client component inside a server component in Next.js, follow these steps:

• Add 'use client' at the very top of the client component file. This tells Next.js to treat it as a client component.
• Import the client component normally inside the server component.
• Render the client component inside the server component's JSX.

This pattern allows the server component to remain static and fast, while the client component handles interactivity.

jsx

'use client';

// ClientComponent.jsx
export default function ClientComponent() {
  return <button onClick={() => alert('Clicked!')}>Click me</button>;
}

// ServerComponent.jsx
import ClientComponent from './ClientComponent';

export default function ServerComponent() {
  return (
    <div>
      <h1>This is a Server Component</h1>
      <ClientComponent />
    </div>
  );
}

Example

This example shows a server component rendering a client component button. The button is interactive and works on the client side, while the server component handles static content.

jsx

// ClientButton.jsx
'use client';

import { useState } from 'react';

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

// Page.jsx (Server Component)
import ClientButton from './ClientButton';

export default function Page() {
  return (
    <main>
      <h1>Welcome to the Server Component</h1>
      <ClientButton />
    </main>
  );
}

Output

<main>
  <h1>Welcome to the Server Component</h1>
  <button>Clicked 0 times</button>
</main>

Common Pitfalls

Common mistakes when importing client components in server components include:

• Forgetting to add 'use client' at the top of the client component file, causing Next.js to treat it as a server component and fail on client-only features like hooks.
• Trying to use client-only hooks (like useState) directly in server components, which is not allowed.
• Importing server components inside client components without proper separation, which can cause hydration errors.

Always mark client components explicitly and import them only inside server components or other client components as needed.

jsx

'use client';

// Wrong: Missing 'use client' causes error
export default function Button() {
  const [count, setCount] = useState(0); // Error if 'use client' missing
  return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}

// Right: Add 'use client' at the top
'use client';
import { useState } from 'react';
export default function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Click {count}</button>;
}

Quick Reference

Concept	Description
'use client' directive	Marks a component as client-side to enable hooks and interactivity.
Server Component	Renders on the server, fast and static, can import client components.
Client Component	Runs on the browser, supports hooks and events.
Importing	Import client components normally inside server components.
Common error	Missing 'use client' causes hooks errors in client components.

Key Takeaways

You can import client components inside server components by marking them with 'use client'.

Server components render static content and can include interactive client components as children.

Always add 'use client' at the top of client component files to enable React hooks and browser features.

Do not use client-only hooks inside server components directly.

Proper separation of client and server components avoids hydration and runtime errors.