07 · Frameworks & State
Next.js
Rendering strategies, the app router, and server components.
The production meta-framework. Interviewers use it to probe rendering strategies, caching, and the server/client boundary.
Routing & structure
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| App Router fundamentals | 🟡 | 1h | #routing |
Next.js: App Router ⭐ |
| Pages Router (legacy) | 🟢 | 45m | #routing |
Next.js: Pages Router ⭐ |
| Layouts & nested routing | 🟡 | 45m | #routing |
Next.js: layouts ⭐ |
| Dynamic & catch-all routes | 🟡 | 30m | #routing |
Next.js: dynamic routes ⭐ |
| Parallel & intercepting routes | 🔴 | 1h | #routing #advanced |
Next.js ⭐ |
| Loading & error UI | 🟡 | 30m | #routing #ux |
Next.js ⭐ |
| Route handlers (API) | 🟡 | 45m | #api |
Next.js ⭐ |
Rendering & data
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Server vs Client Components | 🔴 | 1h | #rsc #rendering |
Next.js: server components ⭐ |
| Data fetching patterns | 🟡 | 1h | #data |
Next.js: data fetching ⭐ |
| Caching layers (request/data/full route) | 🔴 | 1.5h | #caching #performance |
Next.js: caching ⭐ |
| Streaming & Suspense | 🔴 | 1h | #rendering #performance |
Next.js: streaming ⭐ |
| Server Actions & mutations | 🟡 | 1h | #data #mutations |
Next.js: server actions ⭐ |
| ISR (Incremental Static Regeneration) | 🟡 | 45m | #rendering #caching |
Next.js: ISR ⭐ |
| Partial Prerendering (PPR) | 🔴 | 45m | #rendering #modern |
Next.js: PPR ⭐ |
Platform & optimization
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Middleware | 🟡 | 45m | #routing #auth |
Next.js: middleware ⭐ |
| Edge runtime | 🔴 | 45m | #edge #performance |
Next.js: edge ⭐ |
| Metadata & SEO | 🟡 | 45m | #seo |
Next.js: metadata ⭐ |
| Image optimization | 🟡 | 45m | #performance #images |
Next.js: Image ⭐ |
| Font optimization | 🟢 | 30m | #performance #fonts |
Next.js: fonts ⭐ |
| Authentication patterns | 🔴 | 1h | #auth |
Next.js: auth ⭐ |
| Deployment & performance | 🟡 | 45m | #deployment #performance |
Next.js: deploying ⭐ |
❓ Rapid-fire Next.js interview questions
Real Next.js questions asked at the SDE-2 / senior level. Answer out loud, then verify above.
- App Router vs Pages Router — what changed and why?
- Server Components vs Client Components — when do you use each?
- How does caching work in Next.js (request, data, full-route, router cache)?
- SSR vs SSG vs ISR vs PPR — trade-offs?
- What are Server Actions and when do you use them?
- How does streaming with Suspense work?
- What is the Edge runtime and how does it differ from Node?
- How does middleware work and what can it do?
- What do
'use client'and'use server'directives do? - How do you revalidate cached data (
revalidatePath,revalidateTag)? - How do you handle authentication in the App Router?
- How do you set metadata / SEO tags?
- How do you fetch data in a Server Component vs Client Component?
- How do Image and Font optimization work?
- What is
generateStaticParamsand dynamic vs static rendering?
Related: 06-react · 09-performance · 12-networking
Missing something? Add a row.