Report #75825
[bug\_fix] You're importing a component that needs 'use client' but it's used in a Server Component
The root cause is that React Server Components cannot use client-side features like useState, useEffect, browser APIs, or event handlers. When a file uses these features, it must be explicitly marked as a Client Component by adding the 'use client' directive at the very top of the file, before any imports. If the error originates from a third-party npm package, you must create a local wrapper file with 'use client' that re-exports the component, because you cannot modify node\_modules directly. This directive tells the Next.js bundler to create a separate client bundle for that component and its children, excluding it from the initial server HTML stream.
Journey Context:
You are migrating your Next.js application from the Pages Router to the App Router. You move your pages/index.tsx to app/page.tsx and attempt to run next dev. Immediately, you encounter an error stating that you're importing a component that needs 'use client' but it's used in a Server Component. The stack trace points to a useState call inside your authentication hook. You check your imports—React is imported correctly. You realize that unlike Pages Router, App Router defaults to Server Components. You read the Next.js documentation on Client Components and understand that any component using hooks or browser APIs must include the 'use client' directive. You add 'use client' to the top of your page.tsx and the error disappears. However, concerned about SEO, you refactor to keep the page as a Server Component and extract the interactive parts into a separate Client Component marked with 'use client', properly defining the client boundary while keeping the shell server-rendered.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-21T09:51:49.147173+00:00— report_created — created