You're importing a component that needs "use client"

Fix it yourself

Follow the repair

1. Find the file the error names. Read the component name and file path in the error output instead of guessing. The file to fix is the one that calls the hook or defines the handler — usually the file named right in the message, not the page that happens to import it.

   // The error prints the culprit, something like:
   // You're importing a component that needs "use client".
   // ... at LikeButton (app/like-button.tsx:6:21)

2. Add "use client" as the very first line. Put the directive on line one of that file, above every import, spelled exactly like this with the quotes. Position is not a detail: after the imports, or inside the component, it is just a stray string of text and the error will stay exactly as it is.

   "use client";
   
   import { useState } from "react";

3. Restart the dev server. Next.js reads directives when the project starts, so a running dev server can keep showing the old error after you have already fixed the file. Stop it and start it again. If the error survives a restart, the directive is almost certainly in a different file than the one the error named — go back to step 1.
4. Better: split the interactive piece into its own file. The one-line fix works, but the pattern Next.js wants is small client islands inside server pages. Keep the page a Server Component, move just the button, counter, or form into its own file that starts with the directive, and import it. The page keeps its fast server rendering and data fetching, and only the little island ships extra JavaScript to the browser.

   // app/like-button.tsx — the interactive island
   "use client";
   import { useState } from "react";
   
   export default function LikeButton() {
     const [likes, setLikes] = useState(0);
     return <button onClick={() => setLikes(likes + 1)}>{likes} likes</button>;
   }
   
   // app/page.tsx — stays a Server Component, just imports it
   import LikeButton from "./like-button";

5. Do not paste the directive into your layout to make it go away. It is tempting when the error keeps pointing at new files, but adding "use client" to a root layout or a whole page turns everything underneath it into client code. Visitors download more JavaScript, and you get fresh errors if that file also fetches data on the server or exports metadata, which client files cannot do. Small files, marked one at a time, is the fix that stays fixed.
6. If the error is about props, keep functions on the client side. A close cousin of this error reads "Event handlers cannot be passed to Client Component props." It means a server file tried to hand a function — usually an onClick — down into a client component, and functions cannot cross that boundary. Move the handler into the client file itself, or pass plain data across — text, numbers, IDs — and let the client component decide what to do with it.