Next.js · build error

useState / useEffect in a Server Component

Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.

What it means

Every file in the App Router is a Server Component unless it (or a file that imports it) starts with "use client". Hooks like useState, useEffect, useRef and createContext only work in Client Components.

Common causes

• The agent added state or an effect to a page.tsx or layout.tsx
• A component from a tutorial written for the Pages Router
• A context provider placed straight into layout.tsx

How to fix it

1. Move the interactive part into its own file that starts with "use client"
2. Keep page.tsx a Server Component and render the new component from it
3. Don't mark the whole page "use client" just to silence the error: you lose server data fetching and metadata

"use client";

import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Prompt for Cursor or Claude Code

Next.js build fails because a Server Component imports a client-only hook. Find the component that uses the hook, move only the interactive part into a new file that starts with "use client", and keep page.tsx and layout.tsx as Server Components. Don't add "use client" to the page itself.

Not quite your error? Paste yours into the free VibeBoot Doctor or browse the Next.js error fixer.