Last Minute Notes

A beginner to advanced Next.js library: App Router fundamentals, rendering strategies and React Server Components, routing and navigation, data fetching and the caching layers, Server Actions and Route Handlers, authentication and proxy, performance, testing, deployment, and an interview playbook.

Start here for Next.js prep, from "what is the difference between page.tsx and layout.tsx" to "why is this page still showing stale data after the mutation". Each page teaches the framework the way interviews probe it: what runs on the server, what ships to the browser, what is cached where, and how you would prove it. Everything reflects the current platform: the App Router is the default, Server Components are the default component type, Turbopack is the default bundler, params and cookies() are async, proxy.ts replaces middleware.ts, and Cache Components with "use cache" is the explicit caching model.

Start with Next.js Fundamentals

0 of 9 read

01
Next.js Fundamentals
Next.js from zero: what it is and how it differs from plain React, Remix, and Astro, project setup and anatomy, App Router file conventions, layouts and templates, Link and navigation hooks, styling, fonts and images, metadata and SEO, environment variables, and the mistakes SPA developers make first.
Beginner
Table of Contents 1. What Next.js Is 2. Next.js vs the Alternatives 3. Creating a Project 4. Project Anatomy 5. App Router File Conventions 6. Layouts and Templates 7. Linking and Navigation 8. Styling, Fonts, and Images 9. Metadata and SEO 10. Environment Variables 11. Common Mistakes from SPA Developers +1 more
02
Rendering and Server Components
How Next.js renders: CSR, SSR, SSG, ISR, and streaming compared, static vs dynamic rendering and what triggers each, React Server Components and the RSC payload, the use client boundary, composition rules, serialization limits, hydration and its errors, Suspense and loading UI, and Partial Prerendering.
Mid to advanced
Table of Contents 1. The Rendering Spectrum 2. Static vs Dynamic Rendering 3. React Server Components 4. The use client Boundary 5. Composition Patterns 6. Serialization Rules 7. Streaming and Suspense 8. Hydration 9. Partial Prerendering 10. Runtimes: Node.js and Edge 11. Choosing a Strategy +1 more
03
Routing and Navigation
Next.js App Router routing in depth: dynamic, catch-all, and optional catch-all segments, async params and searchParams, route groups and private folders, generateStaticParams, loading, error, and not-found handling, parallel and intercepting routes for modals, redirects and rewrites, internationalization, and client navigation behavior.
Beginner to mid
Table of Contents 1. Segments and Dynamic Routes 2. Params and Search Params 3. Route Groups and Private Folders 4. Static Params 5. Loading, Error, and Not Found 6. Parallel Routes 7. Intercepting Routes and Modals 8. Redirects, Rewrites, and Headers 9. Client Navigation Behavior 10. Internationalization 11. Typed Routes and Organization +1 more
04
Data Fetching and Caching
Data in Next.js: fetching in Server Components, parallel vs sequential requests and waterfalls, request memoization and React cache, the four classic caches (Request Memoization, Data Cache, Full Route Cache, Router Cache), Cache Components with use cache, cacheLife, cacheTag, revalidateTag, updateTag, and refresh, ISR, client-side data libraries, and debugging stale data.
Mid to advanced
Table of Contents 1. Where to Fetch Data 2. Fetching in Server Components 3. Parallel vs Sequential Fetching 4. Request Memoization and React cache 5. The Classic Caching Layers 6. Cache Components and use cache 7. Cache Lifetimes and Tags 8. Revalidation APIs 9. Time-based and On-demand ISR 10. Client-side Data Fetching 11. Debugging Stale Data +1 more
05
Server Actions and Route Handlers
Mutations and APIs in Next.js: Server Actions with forms and progressive enhancement, useActionState, useFormStatus, useOptimistic, validation with Zod, returning errors, revalidation after mutations, file uploads, Route Handlers for REST endpoints and webhooks, streaming responses, CORS, and when to use which.
Mid
Table of Contents 1. Server Actions Basics 2. Forms and Progressive Enhancement 3. useActionState and Pending UI 4. Validation and Error Handling 5. Optimistic Updates 6. Revalidation After Mutations 7. Calling Actions from Event Handlers 8. Uploads 9. Route Handlers 10. Actions vs Route Handlers 11. Security Model +1 more
06
Auth, Security, and Proxy
Authentication and security in Next.js: proxy.ts (formerly middleware) and what it should and should not do, session cookies vs JWTs, the Data Access Layer pattern, authorization at every boundary, Auth.js and other libraries, OAuth flows, CSRF, security headers and CSP with nonces, server-only code, secrets, rate limiting, and a production checklist.
Mid to advanced
Table of Contents 1. Authentication vs Authorization 2. proxy.ts (Formerly Middleware)3. Sessions: Cookies vs JWTs 4. Implementing Sessions 5. The Data Access Layer 6. Where to Check Auth 7. Auth Libraries and OAuth 8. CSRF, XSS, and Cookies 9. Security Headers and CSP 10. Secrets and Server-only Code 11. Rate Limiting and Abuse +2 more
07
Performance and Optimization
Next.js performance: Core Web Vitals and how each is hurt or helped, measuring with Lighthouse, Web Vitals, and the bundle analyzer, next/image, next/font, next/script, bundle size and dynamic imports, Server Component wins, streaming and Partial Prerendering, caching layers, React Compiler, Turbopack, and a debugging playbook.
Mid to advanced
Table of Contents 1. Core Web Vitals 2. Measuring 3. Images 4. Fonts 5. Third-party Scripts 6. JavaScript Bundle Size 7. Server-side Levers 8. Client-side Rendering Cost 9. Build and Dev Performance 10. Backend and Network 11. Debugging Playbook +1 more
08
Testing, Deployment, and Operations
Shipping Next.js: the testing pyramid for the App Router (Vitest, React Testing Library, Playwright, mocking), CI pipelines, deployment targets (Vercel, Node server, Docker standalone, static export, adapters), environment configuration, multi-instance caching and cacheHandler, observability with instrumentation and OpenTelemetry, logging, and upgrades.
Mid
Table of Contents 1. Testing Strategy 2. Unit and Component Tests 3. End-to-end Tests with Playwright 4. Mocking and Test Data 5. CI Pipeline 6. Deployment Options 7. Self-hosting with Docker 8. Environments and Configuration 9. Caching Across Instances 10. Observability 11. Upgrades and Maintenance +1 more
09
Next.js Interview Playbook
Next.js interview rehearsal: what each level is expected to know, a 50-question bank with strong-answer checklists, predict-the-behavior puzzles, machine coding tasks, system design prompts, production scenarios, cheat sheets, common mistakes, and a 7-day study plan.
All levels
Table of Contents 1. What Interviewers Look For 2. Question Bank 3. Predict the Behavior 4. Machine Coding Tasks 5. System Design Prompts 6. Production Scenarios 7. Cheat Sheets 8. Common Mistakes 9. Study Plan

Reading Path

Pick Your Level

You are	Read in this order
A React SPA developer new to Next.js	Fundamentals, Routing and Navigation, Rendering and Server Components
Preparing for a mid-level role	Add Data Fetching and Caching, Server Actions and Route Handlers, and Performance
Preparing for senior or platform roles	Add Auth, Security, and Proxy and Testing, Deployment, and Operations
One week left	The Interview Playbook study plan

React covers hooks, rendering, and patterns that apply unchanged inside Client Components.
JavaScript and TypeScript cover the language your app is written in.
Redux covers Redux Toolkit and RTK Query, which live in Client Components only.
Backend covers HTTP, auth, caching, and queues behind Route Handlers and Server Actions.
Frontend System Design covers the client architecture framework used in design rounds.

Next.js

Reading Path

Pick Your Level

Related Sections

On this page