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

Senior React/Next.js engineers should blend front-end mastery with product sense, production rigor, and cross-stack fluency. The following interview questions and take-home tasks are tuned for enterprise teams shipping SEO-heavy apps, multi-tenant dashboards, and AI-enabled experiences, with explicit focus on Serverless application development, LLM integration services, and GraphQL API development.

What to evaluate

• Architecture instincts: SSR/ISR/SSG trade-offs, App Router, Server Components, streaming, and caching.
• TypeScript depth: generics, discriminated unions, and maintainable types across client/server boundaries.
• Data strategies: GraphQL schemas, codegen, pagination, optimistic updates, and error boundaries.
• Performance: hydration costs, bundle splitting, RUM metrics, and Lighthouse budgets.
• Platform thinking: Serverless primitives, event-driven patterns, and edge execution.
• AI readiness: prompt design, latency control, and safety for LLM-powered UX.
• Security/compliance: XSS/CSRF defenses, JWT/session hardening, PII handling.
• Testing: component, contract, and e2e coverage; mocking network and time.

High-signal screen questions

• Walk me through choosing SSR, SSG, ISR, or client fetch for a product page with frequent price updates. What metrics drive the choice? Listen for cache invalidation strategy, revalidation times, and user-impact reasoning.
• Explain how you’d implement Suspense with Server Components and a GraphQL client. Expect clarity on data fetching boundaries and waterfall avoidance.
• Describe a Serverless incident you debugged in production. What logs, metrics, and traces revealed the root cause? Look for cold start mitigation and idempotency.
• How would you safeguard an AI autocomplete against prompt injection and toxic output? Seek rate limits, output filtering, and grounding via retrieval.
• What’s your approach to performance regression prevention? Expect perf budgets, CI checks, and bundle analysis gates.

Deep-dive interview prompts

• Next.js caching: Given a dashboard aggregating metrics per tenant, design cache keys, revalidation timings, and fallback UX. Discuss per-tenant keys, stale-while-revalidate, and partial re-rendering.
• GraphQL schema design: Define types and mutations for orders, discounts, and inventory. Handle versioning and N+1 avoidance. Look for DataLoader or batching and clear error semantics.
• LLM-powered moderation: Insert an LLM service into a comment pipeline. Address latency, retries, PII redaction, and incident rollbacks. Expect circuit breakers and shadow mode.
• Security in forms: Prevent XSS in rich-text inputs and CSRF on mutations. Listen for sanitization at render, same-site cookies, and anti-CSRF tokens.

Live architecture exercise (30 minutes)

Design a Next.js 14 application for a B2B catalog:

• Home: SEO-first, SSG with ISR, edge-cached.
• Product detail: Server Components with streaming; related items via GraphQL.
• Search: Hybrid-server query + client refinement; autocomplete powered by LLM integration services with guardrails.
• Back end: GraphQL API development gateway federating inventory and pricing; persisted queries and schema linting.
• Infra: Serverless application development on Vercel + regional Lambdas for compute-heavy tasks; background jobs for reindexing.

Evaluation signals: crisp boundaries, minimal waterfalls, caching coherence, observability, and rollback plans.

Take-home task (time-boxed 4-6 hours)

Build a Next.js app that lists products with infinite scroll and detail pages.

• Data: Implement GraphQL API development using Yoga/Apollo Server with a simple schema (Product, Category, Price). Add cursor pagination and a “top sellers” field resolver that batches calls.
• Client: Use App Router with a Server Component for initial data, Suspense for related recommendations, and client components for filters. Enforce a 200KB initial JS budget.
• Search: Provide an LLM-assisted synonym expander for queries via a server action; include safety checks and timeouts. Degrade gracefully if the model times out.
• Serverless: Deploy API and server actions as functions; demonstrate cold-start mitigation through connection pooling and warm-up pings. Include a simple event-driven revalidation webhook.
• Performance: Add route-level cache headers, segment-based code splitting, and image optimization. Capture Web Vitals in the client and log to the server.
• Security: Sanitize any user-generated content, protect mutations with CSRF tokens, and lock cookies to HttpOnly + SameSite=Lax.
• Tests: Component tests for list and detail; contract tests ensuring GraphQL schema stability; e2e for pagination and search.
• Docs: One-page ADR explaining trade-offs, limits, and next steps.

Rubric (100 points):

• Architecture and trade-offs (20)
• GraphQL correctness and performance (20)
• LLM integration services quality and safety (15)
• Serverless application development and ops hygiene (15)
• Performance discipline (15)
• Testing depth (10)
• Docs clarity (5)

Red flags

• Hand-waving about App Router or Server Components trade-offs.
• Ignoring caching layers or revalidation mechanics.
• LLM usage without latency, cost, or safety controls.
• GraphQL resolvers that trigger N+1s or lack error typing.
• No plan for observability, rate limits, or partial outages.

Differentiators

• Demonstrates capability-driven architecture: picks SSR/ISR/SSG per route purpose.
• Owns cross-functional concerns: analytics, SEO, a11y, and compliance.
• Writes defensive code and tests around failure modes and backpressure.
• Uses codegen and strict types to eliminate runtime classes of bugs.

Process tips

Time-box rigorously, simulate production constraints, and interview with real logs and dashboards. Calibrate your team with shared rubrics and require concise ADRs for trade-offs. If you need vetted talent fast, consider partners like slashdev.io for senior React/Next.js engineers who can own Serverless, GraphQL, and LLM features end to end.