[SOLVED] You are importing a component that needs 'use client' error

The ‘You are importing a component that needs use client’ error occurs in Next.js App Router when trying to use a client component (with React hooks, browser APIs, or event handlers) inside a server component without the proper directive.

How the Error Happens

❌ Error Scenario:

// ❌ This causes the error
// app/page.js
import MyClientComponent from './MyClientComponent';

export default function HomePage() {
  return (
    <div>
      <MyClientComponent /> {/* ❌ Error: needs 'use client' */}
    </div>
  );
}

// ./MyClientComponent.js
import { useState } from 'react'; // ❌ React hooks require client component

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

✅ Quick Fix - Add ‘use client’ Directive

Solution 1: Add Use Client Directive

// ✅ In MyClientComponent.js
'use client'; // ✅ Add this directive

import { useState } from 'react';

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

// ✅ Now it can be imported in server components
// app/page.js
import MyClientComponent from './MyClientComponent';

export default function HomePage() {
  return (
    <div>
      <MyClientComponent /> {/* ✅ Works now */}
    </div>
  );
}

Solution 2: Identify Client Component Needs

// ✅ Components that need 'use client':
// 1. Using React hooks (useState, useEffect, etc.)
'use client';
import { useState } from 'react';

// 2. Using event handlers
'use client';
export default function InteractiveButton() {
  const handleClick = () => alert('Clicked!');
  return <button onClick={handleClick}>Click me</button>;
}

// 3. Using browser APIs
'use client';
export default function WindowSize() {
  const [size, setSize] = useState(0);
  
  useEffect(() => {
    setSize(window.innerWidth);
  }, []);
  
  return <div>Width: {size}px</div>;
}

Solution 3: Proper Component Separation

// ✅ Server Component (app/product/[id]/page.js)
import ProductDetails from './ProductDetails';
import { getProduct } from '@/lib/products';

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* ✅ Pass data to client component */}
      <ProductInteractions productId={product.id} />
    </div>
  );
}

// ✅ Client Component (ProductInteractions.js)
'use client';

import { useState } from 'react';

export default function ProductInteractions({ productId }) {
  const [likes, setLikes] = useState(0);
  
  return (
    <div>
      <button onClick={() => setLikes(likes + 1)}>
        Like ({likes})
      </button>
    </div>
  );
}

Solution 4: Conditional Client Components

// ✅ Using React.lazy for conditional client components
// app/page.js
'use client';

import { Suspense } from 'react';
import dynamic from 'next/dynamic';

// ✅ Dynamically import client component
const InteractiveComponent = dynamic(
  () => import('./InteractiveComponent'),
  { 
    ssr: false, // ✅ Don't render on server
    loading: () => <div>Loading...</div>
  }
);

export default function HomePage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <InteractiveComponent />
      </Suspense>
    </div>
  );
}