More in React & Next.js — page 3
Would you use getServerSideProps or getStaticProps for private user data?
Tests SSR vs SSG privacy. Use getServerSideProps: it runs per-request with auth cookies. getStaticProps bakes HTML/JSON at build time, leaking private data across users. Red flag: suggesting ISR or revalidation for authenticated data.
How would you implement a basic protected route in React?
WHAT IT TESTS: Whether you can gate React Router 7 routes declaratively. ANSWER OUTLINE: Hold auth in useState, pass user to protected components, and return Navigate to login when absent.
How do you manage Next.js env variables on Vercel and use NEXT_PUBLIC_?
WHAT IT TESTS: Server-client boundary awareness and secret hygiene. ANSWER OUTLINE: Set DB strings in Vercel dashboard without NEXT_PUBLIC_; consume in server code only. NEXT_PUBLIC_ inlines values into the browser JS bundle, leaking them to all users.
Implement a custom next/image loader for a self-hosted service
Tests next/image loader contract and URL construction. A strong answer defines a function taking src, width, and quality; returns a URL string for your service; and wires it via the loader prop or loaderFile config.
Implement A/B testing with Middleware rewrites and cookies
WHAT IT TESTS: Using Next.js Middleware to split traffic and the cache or analytics impact. ANSWER OUTLINE: Sticky cookie, internal rewrite, vary cache on cookie, server-side analytics. RED FLAG: Client redirects or ignoring cache collisions.
How do you opt out of static rendering for real-time data?
Tests Next.js App Router caching and dynamic rendering escape hatches. Cover force-dynamic SSR, ISR with revalidate, noStore, and client fetching; weigh server load vs staleness. Red flag: only CDN purges without segment config or data cache fixes.
Explain how next/image's sizes prop works for responsive performance
This tests your knowledge of the browser responsive image algorithm. The sizes prop declares the rendered width at each breakpoint so the browser can select the smallest adequate srcset candidate.
How to structure translations and load locale content in App Router
Tests App Router i18n architecture with next-intl. Answer: locale-prefixed routes, JSON message files with ICU syntax, and next-intl APIs consumed in Server Components. Red flag: using client-side locale state instead of integrated routing.
Full Route Cache vs Data Cache and per-fetch cache control
Tests App Router's dual caching layers. Full Route Cache stores rendered HTML and RSC payload at build time; Data Cache stores raw fetch results across routes. Control a fetch with cache and next.revalidate options.
Where Next.js Middleware executes and Edge Runtime limits
Tests your grasp of Edge Runtime constraints. Middleware runs at the Edge before route matching, with no Node.js APIs, require, Buffer, or dynamic eval, only Web APIs. Red flag: treating it as Node.js and suggesting fs or npm packages.
How do you enable basic i18n routing in Next.js?
This tests your knowledge of the built-in Pages Router i18n configuration in next.config.js. A good answer exports an i18n object with locales array, defaultLocale, and optionally localeDetection.
What is Next.js Middleware and a real-world auth use case?
This tests request interception before a route renders. A good answer defines Middleware as pre-request code using NextRequest and NextResponse, often on the Edge Runtime, with auth redirects as an example.
What are the benefits of next/image over a standard img tag?
Tests knowledge of Next.js image infrastructure. Strong answers mention automatic optimization, lazy loading, blur placeholders for layout shift, and responsive srcset. Red flag: calling it a zero-impact wrapper or a styling component.
How to securely set and read httpOnly cookies in Route Handlers
This tests cookie security across the App Router. A strong answer covers setting httpOnly, Secure, SameSite via NextResponse in a Route Handler, reading with cookies() later, and why document.cookie cannot access it. Red flag: client-side JavaScript access.
How do you implement response streaming in a Next.js Route Handler?
This tests Web Streams API mastery in Next.js. Strong answer: create a ReadableStream with TextEncoder, return it in a Response, and cite AI chat or large JSON as use cases. Red flag: suggesting Node res.write instead of standard Web Streams.
How would you use Next.js Middleware to protect /api/admin/* routes?
WHAT IT TESTS: Edge auth and why client session objects cannot secure API routes. ANSWER OUTLINE: Match /api/admin/:path*, read the secure cookie, validate the token, return 401 or proceed. RED FLAG: Using useSession or the client session object in Middleware.
How do you read headers and search params in a Route Handler?
Tests fluency with the Web Standard Request API in Next.js App Router. A strong answer uses request.headers.get() for headers and request.nextUrl.searchParams for query params, avoiding Express-style req.query or req.headers.authorization.
How do you handle multiple HTTP methods in a single route.ts file?
Tests App Router Route Handler REST conventions. A strong answer exports named GET, PUT, DELETE handlers using NextRequest and NextResponse.json, plus 405 for unsupported methods.
How do you create a dynamic API route and access its parameter?
This tests Next.js routing conventions and dynamic parameter extraction. Create /api/products/[productId]/route.js, export a GET handler, and read productId from params. Red flag: mixing App Router params with Pages Router req.query.
GET caching in Route Handlers and how to opt out
Tests App Router GET Route Handler caching and dynamic opt-outs. Hit: export const dynamic = 'force-dynamic', revalidate = 0, dynamic APIs like cookies(), and unstable_noStore(). Red flag: confusing this with Pages Router API routes, dynamic by default.