Skip to content

Tracks Drills Topics Technologies Tech stacks Skill areas

Tracks Drills Guides

Loading

Aporeon

Technical interview practice, from one developer to another.

Guides About Editorial standards Support Privacy Terms Refund policy

React & Next.js Frontend Foundations

Next.js App Router Composition & Actions

Layouts, route groups, parallel and intercepting routes, asynchronous request APIs, server-client boundaries, Server Actions, forms, and authentication.

10 drillsPractice one at a timeOrdered pathComparison questionArchitecture scenarioConcept question

Recommended start

Layout vs template

Connects layouts and templates to navigation, state lifetime, Effects, and deliberate remounting in the App Router.

Medium~7 minStep 1 of 10

Practice this drill Choose another

Search

10 of 10 shown

1Layout vs templateRecommended startConnects layouts and templates to navigation, state lifetime, Effects, and deliberate remounting in the App Router.Comparison questionMedium~7 minNext.jsReactTypeScriptPractice 2Route groupsUses route groups for organization and layout boundaries while accounting for URL collisions and full reloads across roots.Architecture scenarioMedium~7 minNext.jsReactTypeScriptPractice 3Parallel Route stateExplains named slots, retained active state, hard-navigation fallbacks, and the required default files in Next.js 16.Concept questionHard~10 minNext.jsReactTypeScriptPractice 4Intercepted modal routeCombines a canonical detail page with an intercepted modal, Parallel Route slot, browser history, and accessible dismissal.Architecture scenarioHard~12 minNext.jsReactTypeScriptPractice 5Async route APIsCovers Promise-based params and search parameters, async request APIs, generated route types, and runtime validation.Concept questionMedium~7 minNext.jsReactTypeScriptPractice 6Server-client serializationDefines the serializable prop boundary, component composition pattern, and protections against leaking server-only data.Concept questionHard~10 minNext.jsReactTypeScriptPractice 7Action vs Route HandlerChooses between UI-coupled mutations and explicit HTTP contracts without treating either as a hidden trust boundary.Comparison questionHard~10 minNext.jsReactTypeScriptPractice 8Secure Server ActionTreats actions as public mutation endpoints with server validation, fresh authorization, idempotency, transactions, and safe errors.Architecture scenarioHard~12 minNext.jsReactTypeScriptPractice 9Server Action form stateUses semantic forms, action state, pending feedback, server validation, focus behavior, and progressive enhancement.Architecture scenarioMedium~10 minNext.jsReactTypeScriptPractice 10App Router auth boundariesLayers optimistic routing checks with secure data-layer authorization across components, actions, and handlers.Architecture scenarioHard~12 minNext.jsReactTypeScriptPractice

Practice order

10 drillsOne at a time

1Layout vs templateUp next / Medium / ~7 min
2Route groupsMedium / ~7 min
3Parallel Route stateHard / ~10 min
4Intercepted modal routeHard / ~12 min
5Async route APIsMedium / ~7 min
6Server-client serializationHard / ~10 min
7Action vs Route HandlerHard / ~10 min
8Secure Server ActionHard / ~12 min

+2 more drills in this section