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 37
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.
cy.intercept: Control Network Traffic in Cypress Tests
cy.intercept acts like a programmable proxy in your Cypress tests, letting you watch, modify, or fake network requests. Use it to test loading states or error handling without a live backend. Footgun: intercepts are cleared before each test, not just once.
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.
The act Utility in React Testing Library
React Testing Library re-exports everything from DOM Testing Library and explicitly lists act as a core top-level API method alongside render and renderHook, making it available as a named export from the framework package without requiring a separate wrapper.
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.
Next.js: Pages Router vs. App Router
The App Router treats UI as a tree of components, while the older Pages Router treats it as a collection of separate pages. Use App Router for new projects to leverage layouts and Server Components.
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.
next/link: Fast, Client-Side Navigation
next/link is an enhanced <a> tag for fast, client-side page transitions, preserving the SPA feel. It automatically prefetches linked pages for instant loading.
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.
Next.js Route Groups: Invisible Folders for Routes
Route Groups are invisible folders for your Next.js routes, letting you organize files without changing the URL. Use them to apply a specific layout to a set of pages, like a marketing section vs. a user dashboard.
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.
next.config.js: Your Next.js App's Control Panel
Think of next.config.js as your app's control panel, letting you change Next.js's default behavior. Use it for redirects, environment variables, or image optimization. The biggest footgun: you must restart your dev server after making any changes.
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.
Server Components: Fetch Data Directly
Server Components let you fetch data directly using async/await, simplifying code by removing client-side useEffect hooks. Use this for initial page loads in Next.js to improve SEO and performance. The footgun: don't use client-side hooks or browser APIs.
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.
Route Handlers: Your Next.js App's API Endpoints
Route Handlers are lightweight API endpoints built into your Next.js app. Use them to serve JSON or handle form posts. The footgun is confusing them with Server Components; Route Handlers return data, not rendered UI.
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.
Next.js Loading UI: Instant Shells, Streamed Content
Next.js's loading.js shows an instant UI shell while streaming in server-rendered content. Use it for data-heavy pages to improve perceived performance. The footgun: a loading UI only wraps its own route segment and children, not parent layouts.
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.
error.js: Graceful Error Boundaries in Next.js
The error.js file acts as a UI safety net, catching runtime errors in a Next.js route segment to prevent a full app crash. Use it to display a custom error message and a "try again" button.