Next.js app-router critical
Default to Server Components
Use Server Components by default in Next.js App Router. Only add 'use client' when you need interactivity, browser APIs, or React hooks.
- Difficulty
- beginner
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
In Next.js App Router, keep components as Server Components by default. Only add 'use client' when the component needs onClick handlers, useState/useEffect hooks, or browser APIs like localStorage.
Use When
- Creating a new component in Next.js App Router
- Deciding between Server and Client Components
- Optimizing bundle size in Next.js
- Adding data fetching to a component
Skip When
- Using Next.js Pages Router (pages/ directory)
- Component requires useState, useEffect, or event handlers
- Component uses browser-only APIs
Default to Server Components
Use Server Components by default in Next.js App Router. Only add ‘use client’ when you need interactivity, browser APIs, or React hooks.