🌐 Frontend Dev

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.

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.

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.

How would you use generateStaticParams for known products and on-demand unknowns?

Tests App Router hybrid rendering. Export generateStaticParams for known slugs at build time; leave dynamicParams true so unknown slugs server-render on demand. Red flag: citing Pages Router fallback or ignoring route segment config.

How do you implement on-demand revalidation from a CMS webhook?

Tests Next.js cache invalidation and webhook security. Answer: secure Route Handler that calls revalidatePath or revalidateTag; next request rebuilds. Red flag: full redeploys, no secret check, or Server Component revalidate calls.

Explain streaming with Server Components, Suspense, and loading.js

Tests progressive HTML streaming through Suspense boundaries. Strong answers state loading.js auto-wraps a route segment in Suspense so the server can stream the shell instantly and defer slow data without blocking first paint.

How would you structure client-side data fetching in Next.js?

Tests when client fetching is needed in Next.js App Router. A strong answer marks the component with "use client" and fetches in useEffect or via SWR. It also handles loading, error, and race conditions.

How does Server Component fetching differ from getStaticProps and getServerSideProps?

This tests shifting from page-level fetching to component-level async fetches. Strong answers note async await inside components, zero prop drilling, streaming, and mixed static or dynamic data. Red flag: calling them a simple rename of getServerSideProps.

Describe an ideal ISR scenario and configure it in a Server Component

This tests stale-while-revalidate tradeoffs. A strong answer picks a semi-static scenario like a product catalog, then covers the fetch revalidate option or segment-level config. A red flag is confusing ISR with SSR or adding useEffect to a Server Component.

How do you implement SSR in Next.js App Router and configure fetch?

Tests App Router static defaults and fetch-driven dynamic rendering. Strong answer: async Server Component awaits fetch with cache no-store or next revalidate zero to force request-time rendering. Red flag: citing getServerSideProps or useEffect data fetching.

How do you fetch data for SSG in a Next.js Server Component?

This checks if you know Server Components fetch at build time for static routes. A strong answer uses native fetch in an async Server Component, caches into static HTML, and shows a page.js snippet. A red flag is mentioning getStaticProps or useEffect.

Key difference between Server and Client Components in Next.js?

Tests App Router rendering boundaries. A strong answer contrasts server-only execution against browser interactivity, choosing Client Components only for state, effects, or events.

Server Component fetch vs. client-side SWR or React Query

Tests App Router cache boundaries and hydration costs. Strong answers weigh server TTFB and bundle savings against client interactivity, mutations, and background refetching. Red flag: defaulting to client fetching everywhere and ignoring waterfalls.