Senior React/Next.js Hiring: Questions, Tasks & Signals

Senior React/Next.js Hiring: Questions, Tasks, Signals

Enterprise-grade React and Next.js work demands engineers who think in systems, not snippets. Use the framework below to evaluate judgment, performance instincts, and delivery reliability-without sprawling take-homes or vague whiteboarding.

Calibrate the role: full-time vs fractional

Part-time and fractional engineering can de-risk critical initiatives-architecture spikes, migrations, or hardening mobile UI performance-before committing to full-time headcount.
Define scope by outcomes: "Ship an SSR-first marketing stack," "Reduce LCP p75 to under 2.5s on mid-tier Android," "Implement granular caching with revalidation."
Set weekly cadence: design review, measurable perf delta, and delivery demo. Require written postmortems to gauge comms quality.

Targeted interview questions (with what great sounds like)

Next.js data fetching: When do you choose Server Components, Route Handlers, or client-side fetch? Great answers prioritize streaming, cache keys, and revalidation strategies, explaining trade-offs for SEO, TTFB, and personalization.
Edge vs Node runtimes: Which logic belongs at the edge? Strong candidates mention auth token validation, feature flags, geo, and lightweight AB testing; they flag cold starts, limited APIs, and deterministic bundling.
State management: How do you prevent over-hydration? Look for server-first data, RSC boundaries, selective client components, and React Query or SWR with stale-while-revalidate semantics.
Mobile UI performance optimization: Describe reducing LCP without rewriting the design system. Expect image CDNs, next/image with priority hints, CSS containment, content-visibility, font subsetting, and React profiler-driven deopt fixes.
Routing and SEO: How do you structure the App Router for internationalized, indexable pages? Listen for dynamic segment caching, metadata APIs, canonical tags, and sitemaps with incremental static regen.
Accessibility: How do you enforce a11y at scale? Top candidates mention semantic HTML first, aria only when needed, axe CI gates, and storybook contracts.
Security: Common SSR pitfalls? Look for strict CSP, escaping content, avoiding token leakage in serialized props, and careful use of middleware.
Testing: What belongs in unit vs integration vs E2E? Good answers favor component contracts, MSW for API, Playwright for critical flows, and synthetic + RUM performance checks.
Claude Code workflow integration: How do you use AI in code safely? Great answers treat Claude Code as a pair: generate scaffolds, write tests first, review diffs critically, pin citations, and store prompts alongside ADRs.

System design prompt (45-60 minutes)

Design a multi-tenant landing page platform on Next.js that serves 100K daily visits with sub-2s p75 TTFB globally.

Young man in modern office setting with sleek lamps and minimal design. — Photo by cottonbro studio on Pexels

Discuss page assembly using Server Components, tenant-specific theme tokens, and a schema-driven block library.
Propose cache strategy: static for public pages, tag-based revalidation on content changes, and edge caching of HTML.
Instrumentation: define LCP, INP, CLS budgets; wire RUM to dashboards and error budgets into release criteria.
Admin UX: split client components lazily; prefetch editor routes; enforce role-based access in middleware.

Take-home brief (4 hours, strict)

Build a product listing page using Next.js App Router with server-rendered results, filters, and detail pages. Include:

Stylish home office featuring neon lights, computer setup, and aesthetic decor. Ideal workspace inspiration. — Photo by Oğuzhan Öncü on Pexels

Server Components for listing and detail; client components only where interactivity is essential.
Edge-friendly caching with route segment config and tag-based revalidation via a mocked webhook.
Mobile UI performance optimization: target LCP under 2.5s on a Moto G Power via Lighthouse and WebPageTest; document steps taken.
Accessible filters (keyboard, labels), localized metadata, and Open Graph tags.
Testing: at least one Playwright flow and MSW-backed integration test.

Deliverables: repo link, a 1-2 page engineering log, perf reports, and a short loom walking through trade-offs.

Evaluation rubric (score 1-5 per axis)

Architecture: clean RSC boundaries, minimal hydration, stable cache keys.
Performance: measurable LCP/INP gains, evidence-backed decisions, no cargo-cult tweaks.
DX and maintainability: module boundaries, conventions, typing, and docs.
Security and a11y: CSP-ready patterns, zero critical accessibility issues.
Communication: crisp ADRs, risk callouts, and next steps.

Live pairing: production-hard tasks

Refactor a chatty client tree into RSC, preserving UX while slashing JS payload.
Instrument Core Web Vitals in a Next middleware and surface budgets in CI.
Use Claude Code workflow integration to generate tests and a migration plan; evaluate how the candidate validates AI output.

Signals vs red flags

Strong signals: speaks in budgets and trade-offs, shows perf diffs, automates checks, and treats accessibility as a product feature.
Red flags: "We can optimize later," blanket client components, copy-pasted ESLint disables, or AI usage without verification.

Operationalizing the hire

Standardize scorecards; reject "culture fit" without evidence. Calibrate with an internal anchor candidate.
Pilot with part-time and fractional engineering for 4-6 weeks focused on one KPI, then convert based on outcomes.
For vetted talent fast, consider slashdev.io-excellent remote engineers and software agency expertise for shipping real business results.

Final tip: hire for judgment under constraints. The best senior React/Next.js engineers surface trade-offs early, measure ruthlessly, and turn complex systems into simple, observable products that perform beautifully on real devices.