All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8664 bites
Page 39
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.
Implement A/B testing with Middleware rewrites and cookies
Sticky cookie, internal rewrite, vary cache on cookie, server-side analytics.
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.
Next.js Route Segment Config
Think of Next.js Route Segment Config as per-route dials for runtime, caching, and timeouts. Use it to run a specific API route on the Edge for speed or increase the timeout for a data-heavy page. The footgun: settings don't cascade to child routes.
How do you manage Next.js env variables on Vercel and use NEXT_PUBLIC_?
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.
Partial Prerendering (PPR): Static Speed for Dynamic Pages
Partial Prerendering serves a static page shell instantly, then streams in dynamic parts. It's like getting a pre-built house frame immediately, with custom rooms delivered and slotted in as they're finished.
How would you implement a basic protected route in React?
Hold auth in useState, pass user to protected components, and return Navigate to login when absent.
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.
Next.js Route Handlers: One File, Multiple Methods
Think of a Next.js Route Handler file as a dedicated API endpoint. You handle different HTTP requests by exporting functions named GET, POST, DELETE, etc. Use them to build API routes for form submissions or to fetch data for client-side components.
localStorage vs httpOnly cookie for auth tokens
LocalStorage is JS-readable so XSS steals it; httpOnly cookies are JS-invisible blocking XSS theft but exposed to CSRF, mitigated by SameSite and tokens.
NextResponse.json(): The Standard for API Responses in Next.js
NextResponse.json() is the standard way to send JSON from Next.js Route Handlers, like Express's res.json(). Use it in app/api routes to return data; it automatically sets the correct headers.
Session auth in Next.js with API routes and middleware
Login route sets a signed httpOnly cookie, middleware validates the session at the edge and redirects, server components read the session.
How do you handle user-specific content on a getStaticProps page?
Tests the static generation boundary. A strong answer serves a static shell, then hydrates user state client-side via useEffect or SWR. Red flag: claiming getStaticProps can read cookies at build time.
Next.js: Dynamic API Segments for Flexible Endpoints
Think of dynamic API segments as URL templates. A single file like app/api/users/[id]/route.ts can handle requests for any user ID, from /api/users/1 to /api/users/99. The footgun is forgetting to parse the ID, which is always a string.
Describe a robust automatic token refresh strategy in a React SPA
This tests token rotation without UX interruption in SPAs. Use HttpOnly cookies for refresh tokens, in-memory access tokens, an interceptor with a promise lock, and proactive background refresh.
How can you use Edge Middleware for auth and trade-offs versus getServerSideProps?
Middleware checks cookies/JWT for fast Edge rewrites/redirects; getServerSideProps uses full Node.js for heavy sessions with colder starts.
How would you design auth for ISR pages without losing cache benefits?
Tests cache segmentation and dynamic boundaries in Next.js. Propose a static ISR shell for anonymous users, then fetch personalized data client-side or via dynamic server paths when cookies are present.
What are keys in React lists and why are they important?
Whether you understand React's reconciliation identity tracking. Keys are unique identifiers that let React match items across renders, preserving DOM state and avoiding unnecessary recreation.
Describe React's diffing algorithm and its O(n) heuristics
Different types unmount and rebuild; same types patch attributes and recurse; keys hint stable identity for children.
Why did React replace the Stack Reconciler with Fiber?
Tests React scheduling limits. Good answers note the old reconciler was synchronous and recursive, blocking the main thread, while Fiber enables incremental rendering and interruptible work. Red flag: citing Hooks or vague speed claims without frame budgets.