Hiring Senior React/Next.js Engineers: Questions and Tasks

Hiring for enterprise-grade React/Next.js is less about syntax and more about judgment under real constraints. If your roadmap spans logistics and supply chain software, expects API-first web development, and demands measurable performance, your process must reveal system thinking, not just component skills. Here’s a pragmatic guide: pointed interview questions, a take-home that mirrors production, and a review rubric that predicts success. Bonus: close with a Risk-free developer trial week to de-risk the final step.

Core screening questions that separate seniors from strong mids

• Architecture: How would you leverage the Next.js App Router, React Server Components, and caching to minimize TTFB for authenticated pages? Where do you draw server/client boundaries and why?
• API-first strategy: Describe your approach to consuming OpenAPI-described services. How do you enforce type safety end-to-end and handle versioned APIs without breaking clients?
• Data fetching and state: Compare server actions, route handlers, and client-side libraries (e.g., TanStack Query). When do you choose optimistic updates over pessimistic flows?
• Performance and streaming: Explain streaming with Suspense for a dashboard with slow sub-widgets. How do you prevent waterfalls, control priority hints, and measure hydration cost?
• Security: Walk through auth in Next.js with rotating tokens, CSRF on mutations, and session storage on the edge. How do you guard against SSRF in route handlers?
• SEO and marketing: For a marketing-sensitive product, outline structured data, dynamic sitemaps, canonical tags, and A/B testing that doesn’t wreck Core Web Vitals.
• Accessibility and i18n: What’s your a11y checklist for complex tables and maps? How do you handle RTL, number/date formatting, and locale-aware routing?
• Testing and resilience: Show me a testing pyramid using Vitest/Playwright, plus contract tests against an API stub. How do you simulate flaky networks and time-zone quirks?
• Observability: Implement request tracing across Next.js route handlers and client spans with OpenTelemetry, surfacing errors to Sentry with user and tenant context.

Domain deep-dive: logistics and supply chain scenarios

• Real-time tracking: Architect a shipment map with WebSockets, graceful polling fallback, geofencing alerts, and offline-first caching. How do you reconcile out-of-order events?
• Large data grid: Render 50k rows with virtualization, column pinning, and server-side filters. Discuss stable row keys, keyboard navigation, and preserving selection across pages.
• Multi-tenant admin: Enforce RBAC across tenants, guard routes server-side, and isolate caches. How do you ship per-tenant branding without code bloat?
• Operational edge cases: Carriers delay, SLAs shift, events duplicate. Show idempotent mutations, deduplication strategies, and eventual consistency UX patterns.

Take-home task (4-6 hours) that mirrors production work

Build a mini freight booking dashboard in Next.js (App Router, TypeScript). The app lists shipments, allows status updates, and displays a live capacity widget.

• API-first web development: Consume a provided OpenAPI mock service for shipments and capacity. Generate types at build time; no ad hoc typing.
• Data flows: Use server components for initial data, client components for interactions, and optimistic updates on status mutations with rollback on failure.
• Performance: Stream the dashboard shell quickly, progressively load widgets, and avoid N+1 fetches via batching or caching.
• Reliability: Include error boundaries, retry logic with backoff, and idempotent mutation keys.
• Security: Server-validate all mutations, sanitize user input, and never expose secrets in client code.
• UX and accessibility: Keyboard-first grid navigation, clear focus states, live-region updates on status change, and responsive layout.
• SEO and analytics: Add structured data for shipments, dynamic sitemap for list pages, and privacy-safe analytics with route transitions tracked.
• Observability: Basic logging and trace IDs propagated from route handlers to client spans.
• Testing: Unit tests for utilities, integration tests for mutations, and one Playwright e2e path (list → update → verify).
• Docs: A README explaining trade-offs, limitations, and next steps for enterprise hardening.

Review rubric: what to praise and what to flag

• Architecture clarity: Thoughtful server/client splits, predictable caching, minimal provider sprawl.
• Code quality: Strong TypeScript ergonomics, domain-centric naming, small composable components.
• UX polish: Fast first interaction, stable layouts, no jank on streaming.
• Security posture: No client-side secrets, validated inputs, defensive fetch patterns.
• Observability: Useful logs and traces that help debug production issues.
• Red flags: Overuse of context, data fetching inside deep components, coupled UI and network logic, unbounded lists, missing a11y basics.

Live session follow-up (60-90 minutes)

• Change request: Add an SLA breach indicator that colors rows using a server-computed field without extra client fetches.
• Explainer prompts: “How would you shard caches per tenant?” “Where would you place feature-flag checks?”
• Debug drill: Introduce a deliberate race condition in optimistic updates and ask for a fix.

Process design that respects candidates and protects you

• Time-box and pay for the take-home. Supply mocks, an OpenAPI spec, and seed data to avoid yak-shaving.
• Assess authenticity: Compare commit history to narrative in the live session; ask for decision logs.
• Close with a Risk-free developer trial week on a well-scoped bug set. Measure merge velocity, review quality, and collaboration.
• Need vetted talent fast? slashdev.io provides excellent remote engineers and software agency expertise, ideal for startups and businesses turning ideas into production.

Questions great candidates ask you

• What are your performance budgets and SLOs?
• How do you version APIs and deprecate safely?
• What’s your release cadence, CI/CD, and on-call rotation?
• Do you have a design system and accessibility gates?
• How do product, marketing, and SEO requirements shape the Next.js architecture?

Final tips

• Calibrate with a dry run on a known engineer; tune difficulty to your stack.
• Bias toward real work over puzzles; logistics scenarios surface real judgment.
• Score consistently on architecture, correctness, velocity, and maintainability.