Next.js
87 bites tagged Next.js — interview questions with model answers, and 60-second explainers.
Vercel ships AI Gateway, Workflow SDK, and Sandbox for agents
Vercel Agent Stack unifies hundreds of models, durable workflows, and isolated microVMs for production agents. One endpoint routes across providers, checkpoints resume failed runs, and sandboxes isolate unreviewed code.
Next.js 16.2 brings 67-100% faster server Fast Refresh
Next.js 16.2 Turbopack brings Server Fast Refresh to Node.js, cutting reload times 67-100% and compile times 400-900%. Only changed modules reload, not whole chains. WASM Workers, SRI, and dynamic import tree shaking land; upgrade to cut dev latency.
Next.js 16.2 adds agent-native dev tooling
Next.js 16.2 bundles version-matched docs with create-next-app, hitting 100% on framework evals versus 79% without. Browser errors now forward to terminal and a dev server lock file prevents agent confusion. Upgrade if you use AI coding agents.
Explain the difference between Server and Client Components in Next.js
Server components run on the server with no client JS and access backends directly; client components ship JS and handle state. your understanding of rendering boundaries in the Next.js App Router.
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.
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.
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?
Match /api/admin/:path*, read the secure cookie, validate the token, return 401 or proceed. Edge auth and why client session objects cannot secure API routes. 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.
What is NextResponse.json() and how does it differ from standard Response?
NextResponse.json() auto-serializes and sets the application/json header; standard Response needs manual JSON.stringify and headers. Knowledge of Next.js helpers over the Web Response API.
How do you parse JSON body in a POST Route Handler?
It tests whether you know Next.js App Router Route Handlers use the standard Web Request API. Call await request.json() inside the POST function; handle errors with try-catch and return a 400 for invalid JSON.
Create a basic GET API endpoint in Next.js App Router
Tests App Router backend conventions. Create route.js in an app segment, export async GET with NextRequest and return NextResponse; route.js isolates the endpoint from page.js. Red flag: citing pages/api or raw Node res objects.
Get Next.js bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.