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

Hiring Guide: Interview Questions and Take-Home Tasks for Senior React/Next.js Engineers

If your roadmap includes codebase modernization to Next.js, integrating Laravel development services, and running full-cycle product engineering at enterprise scale, your senior React/Next.js hires must excel beyond UI. They need architectural judgment, migration experience, and a bias for outcomes. Use the following questions, scenarios, and take-home tasks to separate resumes from engineers who ship resilient systems and safeguard SEO.

What to screen for

Look for engineers who treat Next.js as a platform, not a framework. They understand the App Router, Server Components, streaming, and caching semantics across server and edge. They can plan phased migrations from CRA, Gatsby, or Laravel Blade without halting feature delivery. They quantify budgets, define SLAs, and negotiate tradeoffs with product, marketing, and SEO.

Team of developers working together on computers in a modern tech office. — Photo by cottonbro studio on Pexels

Interview questions with strong-signal answers

Explain Server Components vs Client Components. When do you force a client boundary, and how do you avoid hydration thrash with complex third-party widgets or charts?
Walk through data fetching in the App Router: cache modes, revalidateTag/revalidatePath, ISR, and streaming with Suspense. Which pages are static, which are dynamic, and why?
Design authentication for a hybrid app: protected server routes, NextAuth or custom OAuth, cookie configuration, and CSRF. How would you integrate Laravel Sanctum when Laravel backs critical APIs?
Demonstrate SEO fluency: Metadata API, canonical URLs, sitemaps, structured data, 308 redirects, and robots. How do you preserve rankings during codebase modernization to Next.js?
Performance playbook: image optimization, next/script strategy, font loading, bundle analysis, route-level code splitting, and RUM. What's your performance budget and how do you enforce it in CI?
Monorepo and DX: Turborepo pipelines, PNPM workspaces, shared UI packages, Storybook, and type-safe endpoints via tRPC or GraphQL. How do you keep cold starts and build times sane?
Testing strategy: component tests with Vitest, Playwright journeys, contract tests against Laravel APIs, and visual diffs. What must run per PR, nightly, and pre-release?
Migration from Laravel Blade: strangler pattern, BFF atop Laravel development services, route parity, auth handoff, and phased SEO redirects. What risks derail launches?

System design scenario: modernize without a freeze

Scenario: Your company runs a multi-locale marketing site on Laravel Blade and a separate CRA dashboard. You must deliver codebase modernization to Next.js in two quarters, preserve organic traffic, and keep weekly releases flowing.

Two people working on laptops from above, showcasing collaboration in a tech environment. — Photo by Christina Morillo on Pexels

Architecture: App Router, shared layout, static marketing with ISR, dashboard using Server Components for data-heavy views, client islands for interactions.
Data layer: Laravel as BFF or API source; type safety via OpenAPI or Zod; pagination, caching headers, and optimistic updates.
SEO/SEM: URL parity, 301/308 plans, sitemaps per locale, hreflang, and measurement with Search Console annotations.
Infra: monorepo with Turborepo, preview deployments per PR, environment separation, and feature flags for gradual cutovers.
Risk control: rollbacks, shadow traffic, RUM baselines, and contract tests against Laravel development services to prevent regressions.

Take-home task (4-6 hours, business-real)

Scope small, judge deeply. The task mirrors production constraints and emphasizes product impact over pixel art.

Implement a product list with server rendering, search, and cursor pagination. Consume a Laravel API (or provide a stub) with proper caching headers.
Prefer Server Components for data display; isolate filter controls and charts as client islands. Demonstrate props serialization boundaries.
Show caching strategy: revalidateTag, ISR for marketing routes, and explicit no-store where appropriate. Include loading UI via Suspense and meaningful error boundaries.
Wire minimal analytics (page view, filter apply) and a feature flag to toggle a new layout. Document how you would run an A/B test safely.
Meet accessibility basics: landmarks, focus order, keyboard traps avoidance, color contrast, and aria-live for search results.
Hit performance budgets: ≤2.5s LCP on a 4G profile, optimized images, font-display swap, and next/script with strategy attributes.
Testing: unit tests for utilities, Playwright for the happy path, and a contract test that validates responses from Laravel development services.
Deliver a README with setup, metrics captured (LCP, CLS, TTFB), tradeoffs, and a "next iterations" section with a one-week plan.

Scoring rubric

Architecture and correctness (35%): coherent data flow, clean Server/Client boundaries, predictable caching, and resilient error handling.
Performance and accessibility (25%): observed LCP/TTFB improvements, sensible bundle splits, semantic HTML, keyboard workflows, and measurable wins in Lighthouse and RUM.
Tests and reliability (20%): focused unit tests, CI-stable Playwright runs, and contract tests that guard Laravel interfaces.
Communication (20%): crisp README, tradeoff logs, timeboxing notes, and a one-week roadmap tied to business metrics.

Try slashdev.io today.