Fix: useState is not allowed in Server Components error Next.js

The ‘useState is not allowed in Server Components’ error occurs when developers try to use React’s useState hook in Server Components. This error is common when migrating to Next.js App Router and understanding the distinction between Server and Client Components.

---

How the Error Happens

❌ Error Scenario - Server Component with useState:

// ❌ This will cause an error
// app/page.js
import { useState } from 'react';

export default function HomePage() {
  // ❌ useState is not allowed in Server Components
  const [count, setCount] = useState(0);

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

❌ Error with Multiple Hooks:

// ❌ This will also cause an error
// app/products/[id]/page.js
import { useState, useEffect } from 'react';

export default function ProductPage({ params }) {
  // ❌ useState not allowed in Server Components
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  // ❌ useEffect also not allowed
  useEffect(() => {
    fetch(`/api/products/${params.id}`)
      .then(res => res.json())
      .then(data => {
        setProduct(data);
        setLoading(false);
      });
  }, [params.id]);

  return (
    <div>
      {loading ? <p>Loading...</p> : <h1>{product.name}</h1>}
    </div>
  );
}

---

✅ Quick Fix - Move to Client Component

Solution 1: Create a Client Component

// ✅ Create a Client Component
// components/Counter.js
'use client';

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>
  );
}

// ✅ Use the Client Component in Server Component
// app/page.js
import Counter from './components/Counter';

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Counter />
    </div>
  );
}

Solution 2: Convert Entire Component to Client Component

// ✅ Add 'use client' directive
// app/page.js
'use client';

import { useState } from 'react';

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

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

Solution 3: Complex State Management

// ✅ Client Component with complex state
// components/ProductDetail.js
'use client';

import { useState, useEffect } from 'react';

export default function ProductDetail({ productId }) {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const res = await fetch(`/api/products/${productId}`);
        if (!res.ok) throw new Error('Failed to fetch');
        const data = await res.json();
        setProduct(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProduct();
  }, [productId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  if (!product) return <p>No product found</p>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

// ✅ Server Component using the Client Component
// app/products/[id]/page.js
import ProductDetail from './ProductDetail';

export default function ProductPage({ params }) {
  return (
    <div>
      <h1>Product Details</h1>
      <ProductDetail productId={params.id} />
    </div>
  );
}