Next.js · build error
"use client" must be placed before other expressions
Error: The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.What it means
The directive only counts as the very first statement in the file. If an import comes first, the file silently stays a Server Component and this error (often with a hook error next to it) appears.
Common causes
- An agent inserted imports above "use client"
- A license header or 'use strict' line above it (comments are fine, code isn't)
How to fix it
- Make "use client" the first line of the file, above all imports
- Re-run the build: any hook errors from the same file usually disappear too
Prompt for Cursor or Claude Code
Next.js says the "use client" directive must be placed before other expressions. Move it to line 1 of every file where it's below an import, and don't change anything else.Not quite your error? Paste yours into the free VibeBoot Doctor or browse the Next.js error fixer.
next: skip the next one
Skip the debugging. The VibeBoot SaaS Starter ships with this already handled: it follows the Next.js 16 conventions (src/proxy.ts, Server Components by default, request-time data in <Suspense>) and its AGENTS.md and .cursor/rules keep your agent on them. Plus auth, Stripe and a database on Next.js 16.4.3. $49, one-time.
14-day money-back guarantee · lifetime updates
Other Next.js errors
$ fixed it? get the next one first
New fixes for what AI agents break, by email.
When we add a fix or a Cursor rule for a new Next.js, Auth.js, Prisma or Stripe break, it goes out in the VibeBoot newsletter. Free, occasional, unsubscribe in one click.