SSR, SSG, ISR, and client rendering — when each helps, and how to talk about them in interviews.

intermediate

app/ directory mental model — layouts, server components by default, routing conventions, and how App Router differs from Pages Router.

beginner

Next.js App Router file conventions map folders to URLs: page, layout, route groups, dynamic segments, and special files.

beginner

Nested layouts in the App Router share chrome across routes, preserve state, and compose with loading and templates.

beginner

RSC mental model in the App Router — server vs client boundaries, data fetching, serialization rules, and composition patterns that stay maintainable.

intermediate

Client Components in the App Router: use client, hydration, bundling boundaries, and patterns that keep JS small.

intermediate

Fetch data in Server Components with async/await and fetch caching: colocation, parallel requests, and client fallbacks.

intermediate

Next.js caching layers: request memoization, data cache, full route cache, and router cache — what invalidates each.

advanced

revalidatePath and revalidateTag invalidate cached data and routes after mutations in the App Router.

advanced

Route Handlers implement HTTP endpoints with route.ts: verbs, Request/Response, caching, and when to prefer Server Actions.

intermediate

Next.js Middleware runs before a request completes: auth redirects, rewrites, matchers, and edge constraints.

intermediate

Stream HTML/RSC payloads with Suspense in Next.js: loading.tsx, nested boundaries, and faster first paint.

advanced

loading.tsx and error.tsx create Instant Suspense and error boundaries per route segment in the App Router.

beginner

Next.js Metadata API sets titles, descriptions, Open Graph, and dynamic SEO fields in the App Router.

intermediate

next/image optimizes responsive images: sizing, remote patterns, priority LCP, and common layout shift fixes.

intermediate

next/font self-hosts fonts, subsets, and CSS variables to kill layout shift and extra network hops to Google.

intermediate

Static vs dynamic rendering in the App Router: what forces dynamic, when static wins, and how to choose.

intermediate

ISR in the App Router: time-based revalidation, on-demand tags, stale-while-revalidate behavior, and when to go fully dynamic.

intermediate

Next.js env vars: server-only secrets, NEXT_PUBLIC_ exposure, .env files, and build-time inlining pitfalls.

beginner

Auth in Next.js App Router: cookies/sessions, middleware gates, server checks, and avoiding client-only security theater.

advanced

Deploy Next.js on Vercel: git integration, env vars, previews, build cache, and production checklist.

beginner

next/link prefetches route payloads in viewport: defaults, opt-out, dynamic routes, and bandwidth tradeoffs.

intermediate

Parallel routes render multiple pages in one layout via named slots (@folder), independent loading, and modals.

advanced

Intercepting routes show a parallel UI (modal) while keeping the underlying URL: folder conventions with (.) (..) etc.

advanced

Server Actions are async server functions callable from forms and client components: mutations, progressive enhancement, revalidation.

advanced

Edge Runtime vs Node.js in Next.js: cold starts, API limits, middleware, and when Node is the right default.

advanced