Junior → Architect → Beyond
Frontend Engineer Roadmap
A level-graded path through everything in this guide. Each stage lists what you can already do and what to learn next — and every flashcard is tagged with its level so you can drill exactly where you are.
- 1
Junior
Ship pages and components with guidance.
You ship pages and components with guidance. The goal is fluency in the App Router's fundamentals — file-system routing, the Server/Client Component split, and basic data fetching — so you can build a working page end to end.
You can already
- ✓Create routes with the file-system convention: page.tsx, layout.tsx, loading.tsx, not-found.tsx.
- ✓Explain, at a surface level, that components are Server Components by default and "use client" opts into the client.
- ✓Fetch data in a Server Component with async/await and render it directly.
- ✓Use next/image and next/font so images and type don't tank Lighthouse out of the box.
- ✓Read route params and searchParams in a page component.
Level up by
- →Dynamic routing depth: catch-all segments, route groups, and generateStaticParams.
- →The caching model — what's cached by default and why a page suddenly goes stale or static.
- →Mutating data with Server Actions instead of hand-rolled API routes.
- →Write your first component and route tests with Jest/RTL.
Drill the flashcards filtered to Junior, plus the Core and Routing categories. Read study topics 01, 02, 11, and 16. - 2
Mid
Own a route end-to-end: data, layout, tests.
You own a route end to end — data, layout, tests — with little hand-holding. The goal is depth across the App Router's everyday toolkit: layered routing, the previous caching model, and Server Actions for real forms.
You can already
- ✓Reach for route groups, parallel routes, and intercepting routes when the URL structure calls for them.
- ✓Tune fetch caching with { cache, next: { revalidate, tags } } and invalidate it with revalidatePath/revalidateTag.
- ✓Build a form on a Server Action with pending/error states, not a client-side fetch to a hand-rolled API route.
- ✓Gate a route behind auth with a check in a layout or middleware and redirect appropriately.
- ✓Write unit tests for components and routes with Jest and React Testing Library.
Level up by
- →Cache Components depth: "use cache", cacheLife, cacheTag, and how they replace the old fetch-cache mental model.
- →Performance profiling: reading the RSC payload, trimming client bundles, chasing Core Web Vitals with real tooling.
- →Security hardening: the data access layer, avoiding secret leakage into client bundles, CSRF on Server Actions.
- →Frontend system-design thinking: where rendering strategy and caching decisions actually live.
- 3
Senior
Rendering & caching depth, performance & security.
You bring rendering, caching, and performance depth, and you raise the team's bar on both speed and safety. The goal is to be the person who profiles instead of guessing and can defend a caching decision under questioning.
You can already
- ✓Explain Cache Components ("use cache", cacheLife, cacheTag) and the RSC payload cold, including what actually crosses the wire.
- ✓Design auth so it can't be bypassed: checks in proxy.ts for routing plus real checks inside every Server Action and data-access call.
- ✓Profile Core Web Vitals with Lighthouse, Chrome DevTools, and Vercel Analytics, then fix the actual bottleneck.
- ✓Harden an app against XSS, CSRF, and accidental server-secret leakage into client bundles.
- ✓Decide, with reasons, when a route should be static, dynamic, or streamed — and defend the trade-off.
Level up by
- →System design at scale: rendering/caching strategy for a whole product, not one route.
- →Monorepo and shared component-library decisions that other teams build on top of.
- →Edge delivery: what belongs on the edge, what doesn't, and why.
- →Driving a safe, staged migration (e.g. adopting Cache Components) across a large codebase.
- 4
Architect
System design, platform decisions, org-wide conventions.
You design the rendering and caching strategy for a whole product and make the platform decisions that move a whole team. The goal is decision-making before code — for the slowest network, the biggest bundle, and the riskiest migration.
You can already
- ✓Design a rendering/caching strategy for an entire product and justify it route by route.
- ✓Own monorepo structure and a shared component library that multiple apps build on.
- ✓Make the edge/CDN/deployment-model call and explain what it buys and what it costs.
- ✓Drive a large, safe migration — e.g. a staged Cache Components rollout — without a big-bang rewrite.
- ✓Set org-wide conventions for data fetching, error boundaries, and testing so teams stop reinventing them.
Level up by
- →Org-level platform strategy: golden paths, shared tooling, and how new apps get bootstrapped.
- →Cost and performance budgets at scale — what a regression actually costs and how you catch it before it ships.
Filter flashcards to Architect and the Rendering and Core categories. Work the full Architecture guide and the system-design prompts. - 5
Beyond
Frontier: Cache Components, edge, streaming AI UIs.
The frontier — where you push what a Next.js frontend can do. The goal is to bring genuinely new capability and pioneer the patterns the rest of the team will eventually adopt.
You can already
- ✓Pioneer Cache Components adoption patterns before they're common knowledge on the team.
- ✓Build streaming AI UIs — SSE or the use() hook with Suspense — for LLM responses that render as they arrive.
- ✓Use View Transitions and <Activity> to make navigation feel app-like instead of page-reload-like.
- ✓Contribute rendering and caching patterns upstream, back into the framework's ecosystem or internal tooling.
Level up by
- →Keep tracking the framework's edge — new primitives land fast, and being early is the whole point of this level.
Filter flashcards to Beyond, and read study topics 05, 09. Try the streaming-UI and migration design prompts.