Senior React/Next.js Hiring Guide: Questions and Tasks
Hiring a senior React/Next.js engineer isn't about trick questions; it's about validating judgment, speed-to-value, and a battle-tested grasp of cross-browser responsive front-end engineering. The best candidates connect product outcomes to architectural choices, defend tradeoffs, and bake in Mobile UI performance optimization from day zero. Use the following questions and tasks to separate strong framework users from true front-end engineers.
Deep-dive interview questions that reveal seniority
- Next.js rendering strategy: "Walk me through choosing SSR vs SSG vs ISR for a catalog with hourly price updates." Strong answers reference data volatility, cache invalidation via revalidateTag, user-specific personalization, and partial static generation of facets for SEO.
- React Server Components boundaries: "Which components should remain server-only and why?" Look for minimizing hydration, pushing data fetching and computation to the server, carefully isolating client interactivity, and streaming above-the-fold content.
- Data fetching and caching: "How do you layer HTTP caching and Next.js caching?" Expect Cache-Control, stale-while-revalidate, route handlers for co-location, edge runtime where appropriate, and a clear invalidation plan.
- Cross-browser responsive strategy: "How would you implement container queries with fallbacks?" A senior covers progressive enhancement, @supports checks, Safari quirks, focus-visible, viewport units for notched devices, and robust Flex/Grid fallbacks.
- Mobile performance budgets: "How do you keep LCP under 2.5s on mid-tier Android?" Look for next/image, responsive formats (AVIF/WebP), preconnect/preload of critical assets, code-splitting with dynamic import, font-display swap, and eliminating unnecessary client JS.
- Accessibility at scale: "How would you make a complex dialog accessible?" Expect keyboard focus traps, aria-modal, labels, escape-to-close, screen reader testing in NVDA/VoiceOver, and avoiding offscreen scroll traps on iOS.
- Internationalization and SEO: "How do you handle localized routing and metadata?" Candidates mention Next.js app router i18n, per-locale static params, canonical tags, Open Graph, structured data (JSON-LD), and slug strategy.
- Security in mixed server/client surfaces: "Where are XSS and SSRF risks?" Look for caution with dangerouslySetInnerHTML, sanitization, CSP, validating external fetches in route handlers, and secure cookies with sameSite and HttpOnly flags.
- Testing for confidence: "What's your testing pyramid?" Expect unit tests for logic, RTL for components, Playwright for cross-browser E2E, MSW for network mocking, and Lighthouse/Web Vitals in CI.
- Observability and rollouts: "How do you detect regressions?" Listen for RUM via Web Vitals, synthetic checks, feature flags for progressive delivery, and tracing with Next.js instrumentation.
Take-home task (time-boxed to 4-6 hours)
Build a mini marketplace in Next.js (App Router) with a product grid, filter panel, and server-side search.
- Data: Use a route handler that pages and filters. Cache list pages with ISR, and invalidate via revalidateTag after "admin" changes (mocked).
- Rendering: SSG category pages, SSR personalized "recently viewed," and client components only for interactive filters.
- Cross-browser responsive front-end engineering: Use CSS Grid with flex fallbacks, container queries (with graceful degradation), and verify Chrome, Safari, and Firefox behavior.
- Mobile UI performance optimization: Budget LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 on a Moto G-class device. Include a Lighthouse report and bundle analysis.
- Assets: next/image with responsive sizes, preload hero, defer non-critical JS, remove unused polyfills.
- Accessibility: Keyboard usable filters, visible focus, ARIA for live region updates on search results, color contrast ≥ 4.5:1.
- SEO: Breadcrumbs, canonical, structured data for Product and ItemList, meaningful meta and Open Graph.
- State and URLs: Filters reflected in query params. Refreshing preserves state; server rendering remains cacheable.
- Deliverables: README with setup, decisions, tradeoffs, test strategy, and a brief performance note (what you measured and why).
Live pairing and debugging prompts
- Hydration mismatch: Given a server component that reads unstable browser state, fix the mismatch and explain the boundary.
- Bundle bloat: Use next build analyze to identify a large charting library; extract only needed modules and defer loading behind interaction.
- Safari sticky/overflow bug: Implement a scrollable filter panel that keeps the apply button sticky without creating a scroll trap.
Evaluation rubric (score 1-5 each)
- Architecture: Clear server/client separation, predictable data flows, error boundaries, TypeScript strictness.
- Performance: Meets budgets, ships minimal JS, optimized images and fonts, measures before/after.
- Accessibility: Keyboard-first, screen reader semantics, no motion-only cues, robust focus management.
- Cross-browser depth: Verified behavior across engines; uses progressive enhancement thoughtfully.
- Product sense: Justifies tradeoffs, prioritizes impact, uses analytics and experiment flags.
- Communication: Writes crisp ADRs, surfaces risks, proposes phased rollouts.
Red flags to watch
- Everything is a client component; ignores RSC and hydration cost.
- No performance measurements; relies solely on gut feel.
- One-browser assumptions; CSS features without fallbacks.
- Complex state tools for simple flows; avoids the URL for shareable state.
- Testing only "happy path"; no CI or accessibility checks.
When outsourcing the search
If you pursue software engineering outsourcing, insist on this exact rubric in vendor workflows: written ADRs, performance budgets in contracts, cross-browser test matrices, and CI with Web Vitals gating. Partnering with a vetted network like slashdev.io can accelerate hiring while maintaining bar-raising standards; they provide seasoned remote engineers and agency expertise to ship fast without sacrificing quality.
Adopt this playbook, calibrate using a short paid pilot, and hire the talent that turns React/Next.js into a durable competitive edge.
