Senior React/Next.js hiring guide: interviews and take-home tasks
Great senior engineers demonstrate product sense, operational maturity, and ruthless focus on performance. This guide gives you concrete interview questions, realistic take-home tasks, and a scoring rubric aligned to enterprise needs like performance audits for web apps and release management at scale.
What "senior" looks like in React/Next.js
- Designs for change: anticipates domain growth, isolates volatility behind stable interfaces.
- Owns delivery: ships with CI, observability, feature flags, and rollback plans.
- Understands the platform: server components, edge rendering, caching layers, and the browser.
- Communicates trade-offs crisply to product and marketing stakeholders.
High-leverage interview questions (with what to listen for)
- Explain your mental model of Next.js routing, data-fetching (RSC/Server Actions), and caching. How do you prevent stale or thundering herd issues? Look for concrete cache keys, revalidation windows, ISR vs SSR decision trees, and idempotent mutations.
- Walk through a complex state management decision. Why Context + reducers vs Zustand vs Redux Toolkit? Expect discussion around bundle size, co-location, devtools, and concurrency with React 18.
- How do you tame hydration? Probe for partial hydration, streaming, Suspense boundaries, priority hints, and skeleton strategies that match user journeys.
- Discuss your approach to performance audits for web apps. Strong answers reference baselining Core Web Vitals, scripting CPU profiles, performance budgets in CI, and remediation playbooks.
- Security posture in Next.js. Look for CSP, Trusted Types, header hardening, server action validation, and secrets management across environments.
- Describe your release strategy. Canarying, feature flags, automated rollback, and clear ownership. Bonus: app store deployment and release management for React Native or TWA packaging.
- Tell me about a failure. Expect blameless postmortems, KPIs protected, and systemic fixes.
Take-home Task A: performance and correctness under constraints (3-4 hours)
Prompt: You receive a Next.js 14 repo that renders a product listing with client components. Convert to server components where appropriate, add a faceted filter, and hit 95+ Lighthouse Performance on a throttled Moto G device.
- Deliverables: pull request with commit hygiene, a README explaining trade-offs, and a Lighthouse report plus WebPageTest link.
- Constraints: no UI kit; limit JS to under 110KB for the main route; ship an accessibility checklist.
- Scoring: 40% performance results, 30% architecture quality, 20% tests (Vitest/Playwright), 10% docs.
Take-home Task B: release management and observability (2-3 hours)
Prompt: Implement feature-flagged checkout steps with LaunchDarkly (or a stub), add server action validation, and wire error tracking and tracing.
- Deliverables: CI pipeline with type-check, lint, tests, Lighthouse CI; canary deployment plan and rollback recipe.
- Bonus: outline app store deployment and release management for a React Native companion app, including phased rollout, symbol uploads, and fastlane lanes.
- Scoring: 35% operational excellence, 35% reliability, 20% documentation, 10% polish.
Live exercises that reveal depth
- System design: Multi-tenant Next.js platform serving localized content at the edge. Discuss CDN keys, per-tenant theming without redeploys, and cache busting.
- Data: Design optimistic updates with server actions, reconcile conflicts, and guard against over-fetching.
Evaluation rubric you can adopt tomorrow
- Architecture: separation of concerns, misuse avoidance (e.g., client components in hot paths), and caching correctness.
- Performance: measurable wins, budgets enforced in CI, and a repeatable audit methodology.
- Reliability: tests across layers, observability, and clear rollback plans.
- Product sense: trims scope safely, writes crisp tickets, and pairs well with design and SEO.
Real-world scenario prompts
- Marketing campaign spike: Your brand launches a global promo. How do you pre-warm caches, tune edge TTLs, and protect origins while preserving personalization?
- SEO regression: After a refactor, LCP worsens and crawl stats dip. Ask for a root-cause plan using Search Console, render diagnostics, and code diffing.
- Internationalization: Ship Arabic and Japanese with zero layout shifts. Probe for font loading, directionality, and locale routing.
Signals that you should hire React developers
- Their plans survive failure modes: timeouts, partial outages, and flaky networks.
- They automate boring things: performance audits for web apps, accessibility checks, and release notes.
If you need a vetted shortlist, slashdev.io pairs you with senior React and Next.js specialists and backs them with agency-level delivery practices.
Red flags
- Defaulting to client components without measuring cost.
- No opinion on caching or a hand-wavey "we'll add Redis."
- Confuses feature flags with branches; no rollback story.
- Equates Lighthouse green with user-perceived speed absent field data.
Close with a simple process
Run a 30-minute signal scan using the questions above, assign one focused take-home, follow with a 60-minute deep dive on results, and finish with a collaborative design whiteboard. The outcome is a defensible hiring decision and a codebase that will scale alongside your roadmap.
