Get a $149 diagnosis

Error library

Next.js: React client hook in a Server Component

In the App Router, components are Server Components by default and can't use client hooks like useState or useEffect. Add 'use client' at the top of the file that uses the hook, or move the interactive part into a small client component.

Cause: A hook that needs the browser runs in a component without the 'use client' directive.

How to fix it

  1. Find the component using the hook (the error points to it).
  2. Add 'use client' as the first line of that file.
  3. Keep data fetching in Server Components; pass data to the client component as props.
  4. Don't mark whole layouts as client unless needed.

Example

Illustrative example, not from a customer project.

+ 'use client'
  import { useEffect } from 'react'

FAQ

Does 'use client' hurt SEO?

Client Components are still prerendered to HTML; they just also hydrate in the browser.

Why did this appear after migrating to the App Router?

The Pages Router had no Server Components; the App Router defaults to them.

Get a $149 diagnosis See pricing Launching soon? The Launch Path gets you ready for $1,195 flat.

$149Get a $149 diagnosis