Attempting to use browser-only hooks like 'useState' or 'useEffect' inside a Server Component.
Interactive Simulation Engine
Directive Enforcement Simulation
Server-side hook violation
app/counter.tsx
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
...
}
The Rule: Every component in the App Router is a Server Component by default. Browser features like useState require an explicit boundary using the directive.
Executable Code Workbench
page.tsx
Live Code Editor1// ❌ ERROR: useState in Server Component
2import { useState } from 'react'
3
4export default function Counter() {
5 const [c, setC] = useState(0) // THROWS ERROR
6}
7
8// ✅ FIX: Add directive
9'use client'
10import { useState } from 'react'Mental Model
Add the 'use client' directive at the very top of the file to declare a boundary.
Why This Exists
To protect the integrity of the rendering lifecycle and ensure your application remains stable across different environments.
Critical Note
"Errors in Next.js aren't just bugs; they are often the framework enforcing strict architectural safety rules to prevent security leaks or performance regressions."