Next.js Server Component Error: Cannot use client-side API in a Server Component

What causes this error

In the Next.js App Router, every component is a Server Component by default. Server Components render on the server and send HTML to the client — they never run in the browser. This means React hooks that manage client-side state (useState, useReducer), side effects (useEffect, useLayoutEffect), refs (useRef for DOM nodes), event handlers (onClick, onSubmit), and browser APIs (window, document, localStorage, navigator) cannot work because there is no browser environment on the server. When Next.js detects these APIs in a Server Component during compilation, it throws an error because the code would fail at runtime if allowed to proceed.

How to fix it

1. 01

   step 1

   Identify what triggered the error

   The error message explicitly names the disallowed API. Common triggers: 'useState is not a function', 'useEffect is not allowed in Server Components', 'Event handlers cannot be passed to Client Component props from Server Components', or 'window is not defined'. Read the error message — it tells you exactly which API and which file.

   # Typical error messages:
   # × You're importing a component that needs `useState`. This React hook only works in a Client Component.
   # × You're importing a component that needs `useEffect`. This React hook only works in a Client Component.
   # × Event handlers cannot be passed to Client Component props from a Server Component.

   Copy
2. 02

   step 2

   Decide: should this entire file be a Client Component?

   If the component is purely interactive (a form, a modal, a counter, a dropdown), add 'use client' at the very top of the file, before any imports. This is the simplest fix. But if the component is mostly static with one small interactive element, the better pattern is to extract just the interactive part.

3. 03

   step 3

   Option A: Add the 'use client' directive

   Place 'use client' as the very first line of the file (before imports). This marks the file and everything it imports as Client Components. They will still be server-rendered for the initial HTML, but they will also hydrate and run in the browser.

   'use client';
   
   import { useState, useEffect } from 'react';
   
   export function SearchBar() {
     const [query, setQuery] = useState('');
   
     useEffect(() => {
       // runs in the browser after hydration
       document.title = query ? `Search: ${query}` : 'Home';
     }, [query]);
   
     return (
       <input
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder="Search..."
       />
     );
   }

   Copy
4. 04

   step 4

   Option B: Extract the interactive part into a separate Client Component

   Keep the parent as a Server Component (for data fetching, direct database access, keeping secrets server-side). Create a new file for just the interactive UI, mark that file with 'use client', and import it into the Server Component.

   // app/products/page.tsx — Server Component (no 'use client')
   import { db } from '@/lib/db';
   import { AddToCartButton } from './add-to-cart-button';
   
   export default async function ProductsPage() {
     const products = await db.product.findMany(); // direct DB access
     return (
       <ul>
         {products.map((p) => (
           <li key={p.id}>
             {p.name} — ${p.price}
             <AddToCartButton productId={p.id} />
           </li>
         ))}
       </ul>
     );
   }
   
   // app/products/add-to-cart-button.tsx — Client Component
   'use client';
   
   import { useState } from 'react';
   
   export function AddToCartButton({ productId }: { productId: string }) {
     const [added, setAdded] = useState(false);
     return (
       <button onClick={() => setAdded(true)}>
         {added ? 'Added ✓' : 'Add to Cart'}
       </button>
     );
   }

   Copy
5. 05

   step 5

   Fix the window/document access pattern

   If you need browser APIs like window or document in a Client Component, guard them with a typeof check or useEffect. Even Client Components server-render their initial HTML, so window is undefined during SSR.

   'use client';
   
   import { useEffect, useState } from 'react';
   
   export function WindowWidth() {
     const [width, setWidth] = useState(0);
   
     useEffect(() => {
       // Safe: useEffect only runs in the browser
       setWidth(window.innerWidth);
       const handleResize = () => setWidth(window.innerWidth);
       window.addEventListener('resize', handleResize);
       return () => window.removeEventListener('resize', handleResize);
     }, []);
   
     return <span>Width: {width}px</span>;
   }

   Copy

How to verify the fix

• npm run build completes without Server Component errors.
• The interactive element works in the browser (click handlers fire, state updates render).
• Server Components still render their content in the initial HTML (view page source to confirm).