More in React & Next.js — page 4
What is NextResponse.json() and how does it differ from standard Response?
WHAT IT TESTS: Knowledge of Next.js helpers over the Web Response API. ANSWER OUTLINE: 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.
What are Parallel and Intercepting Routes? Describe a photo gallery modal scenario.
This tests App Router layout composition and URL-state. A strong answer defines @modal slots and intercepting (.) routes, explaining modal overlays that preserve page context. Red flag is proposing global state or portals over file-system conventions.
How do nested layouts work in the App Router?
Tests nested layout composition and state persistence in the App Router. Good answers explain root wraps dashboard wraps page, dashboard state survives child navigation, and only the page segment rerenders.
Recommended App Router pattern to fetch shared data once for child routes
Tests App Router layout constraints and request deduplication. Answer: wrap the user fetch in React cache, call it from layout and child Server Components, and let Next.js deduplicate. Red flag: layout prop drilling or getServerSideProps.
What are Next.js Route Groups and a practical use case?
Tests App Router conventions organizing routes without changing URLs. A good answer names parenthesized folders like (shop) removed from the path, cites multiple layouts per section, and keeps URLs clean. Red flag: confusing them with dynamic [slug] segments.
How do loading.js and error.js integrate with Suspense and Error Boundaries?
Tests grasp of App Router conventions wrapping React primitives. loading.js suspends its segment for instant navigation feedback; error.js adds a client Error Boundary for child segment crashes. Wrong: assuming they are server-only or replace manual usage.
How do you create a /blog/[slug] route and access the slug value?
WHAT IT TESTS: Next.js file-system routing and param access. ANSWER OUTLINE: Use a [slug] directory with page.js; in App Router read the params prop in server components or useParams in client components.
What is layout.js and how does it differ from shared headers?
WHAT IT TESTS: App Router state preservation and nesting. ANSWER OUTLINE: layout.js persists across navigations without remounting; a shared header in each page.js remounts and loses state. RED FLAG: calling them identical or only citing DRY.