Hiring Senior React/Next.js Engineers: Interview and Tasks
Hiring a senior React/Next.js engineer is less about trivia and more about tradeoffs: rendering strategy, data consistency, performance budgets, and safe deployments. Use the following questions and take-home tasks to separate strong product engineers from framework tourists.
What Senior Looks Like
Define seniority by outcomes, not years: can they design, ship, and operate a feature end to end while coaching others?
- Owns architecture using Next.js App Router, Server Components, and caching strategies aligned with product goals.
- Balances SSR, SSG, ISR, and client rendering to hit Core Web Vitals under load.
- Builds resilient data layers with React Query or SWR, idempotent APIs, and optimistic updates.
- Engineers accessibility by default: keyboard flows, ARIA correctness, focus management, and color contrast.
- Automates quality with TypeScript, unit/integration tests, and CI gates that catch regressions early.
- Understands product tradeoffs, communicates risk, and proposes phased delivery to de-risk complexity.
Interview Questions That Reveal Seniority
Use scenario prompts over fact checks. Listen for mental models, not buzzwords. Sample prompts and strong signals:
- Architecture: When would you choose Server Components with streaming over pure client rendering for a dashboard? Good signal: mentions reducing bundle size, faster TTFB, Suspense boundaries, selective hydration, and cache revalidation.
- Data fetching: Explain how you'd design cache keys and invalidation in React Query for a multi-tenant app. Good signal: stable keys, per-tenant scopes, background refetch, and optimistic rollback.
- Performance: A route has poor LCP. Walk through your diagnosis and fixes. Good signal: measures first, images via next/image, preconnect, critical CSS, code-splitting, and field monitoring.
- State management: When do you avoid Redux in favor of Server Components or URL state? Good signal: minimizes client state, leans on server derivation, and uses transitions.
- Types: Show a discriminated union modeling API responses and how you narrow it in components. Good signal: exhaustive switches, inference-friendly helpers, and runtime guards.
- Security: How would you implement session fixation protection with NextAuth and middleware? Good signal: rotate session on login, HttpOnly cookies, sameSite, and CSRF tokens.
Take-Home Tasks (4 hours max)
Cap work to four hours, provide a repo template, and allow choice of tools within constraints.
- Task 1: Build a paginated product catalog with the App Router. Use a Server Component route that fetches data, Suspense for streaming results, and client search with URL sync. Include an error boundary and a loading skeleton. Evaluate: route cache tags, no fetch in effects, minimal client JavaScript.
- Task 2: Implement authentication with NextAuth, RBAC for admin/editor, and protected routes. Add Edge Middleware to block unauthorized access and log attempts. Evaluate: secure cookie settings, session rotation, clear redirects, and audit-friendly logging.
- Task 3: Optimize a slow product page. Provide a failing Lighthouse report and ask candidates to improve LCP and CLS. Evaluate: next/image usage, preloading, React lazy for routes, bundle analyzer notes, and field metrics via Web Vitals.
- Bonus: Accessibility and i18n. Require keyboard-only navigation, semantic landmarks, and a locale toggle with number/date formatting.
Anti-patterns to Flag
Great seniors avoid hidden complexity. Watch for these patterns during review and live discussion:
- Fetching in useEffect when a Server Component or route handler is appropriate.
- Overusing client components and global state rather than deriving data on the server.
- Ignoring error boundaries, retry logic, and idempotency for mutations.
- Ad-hoc TypeScript any usage, weak API typing, and mismatches with backend contracts.
- Security blind spots: missing CSRF protection, unsafe cookies, and leaky tokens in logs.
Scoring Rubric
Score consistently so you can compare candidates and justify decisions.
- Architecture and rendering strategy (30%): correct use of App Router, Server Components, and caching.
- Performance and Web Vitals (25%): measurable LCP/CLS improvement, minimal JS, smart image/fonts.
- Testing and quality (20%): unit, integration, and basic E2E coverage with clear CI.
- UX and accessibility (15%): keyboard support, focus management, and semantics.
- Communication (10%): tradeoffs, reasoning clarity, and concise documentation.
Sourcing and Models
If your roadmap can't wait, consider On-demand software development talent to bridge critical gaps. Staff augmentation for software teams lets you scale capacity without diluting standards-pair a senior with your PM, keep code in your repo, and enforce your CI.
Evaluating platforms? As a Toptal alternative, slashdev.io provides excellent remote engineers and software agency expertise for business owners and startups to realize their ideas, pairing delivery with architecture so teams gain speed without sacrificing code quality or long-term maintainability.
Final Tips
Close strong with a structured loop: interview for judgment, test for depth, and verify outcomes.
- Share context, constraints, and metrics.
- Timebox tasks; forbid unpaid marathons.
- Review diffs together; ask why.
- Reference check for execution velocity.
