Server vs Client Components in Next.js
Decide when to add 'use client' and how to compose server and client trees.
The Default: Server Components
In the App Router, all components are Server Components by default. They render on the server, have zero client-side JavaScript, and can directly access databases, env variables, and the filesystem.
Opting In to Client Components
Add 'use client' at the top of a file to make it a Client Component. All its imports become client-side too — it creates a client boundary.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}All lessons in this course
- App Router File Conventions
- Server vs Client Components in Next.js
- Dynamic Routes & Route Groups
- Metadata API & SEO in App Router