Next

Active problem-solving

Practice Prompts

Try it before you reveal. Each coding and system-design prompt unfolds in stages — approach, then solution — so you practice retrieval, not recognition. Mark what you solved; revisit the rest.

Solved 0 / 11
Level
  1. CodeSenior

    Cache a data-fetching Server Component with Cache Components

    Next.jscachingCache Components

    A product page Server Component calls getProduct(id) (a slow DB read) on every request. Using the Cache Components model (cacheComponents: true), cache the fetched data for up to an hour, tag it so a price update can invalidate it immediately, and make sure the build doesn't fail on a component that also reads cookies() for a "recently viewed" strip.

    next: new
  2. CodeMid

    Server Action form with useActionState + revalidatePath

    Next.jsServer Actionsforms

    Build a "rename project" form: a Server Action mutates the DB, the form shows a pending spinner while it runs, surfaces a validation error inline without a full page reload, and the project list page reflects the new name immediately after success.

    next: new
  3. CodeMid

    Optimistic like button with useOptimistic

    Next.jsuseOptimisticServer Actions

    A post's like button currently waits for a full round trip before the count updates, which feels slow. Make the like count and "liked" state update instantly on tap, roll back automatically if the Server Action fails, and never let the button be tapped twice while a request is in flight.

    next: new
  4. CodeMid

    Spot the bug: Server/Client Component boundary

    Next.jsServer Componentsdebugging

    A teammate's PR fails to build with "You're importing a component that needs `useState`. This React hook only works in a client component." Here's the tree — find the bug and fix it with the smallest possible change (don't just slap "use client" on everything).

    // app/dashboard/layout.tsx 'use client'; import { Sidebar } from './sidebar'; // has useState (a collapse toggle) import { DashboardStats } from './stats'; // async Server Component, awaits db export default function DashboardLayout({ children }) { return ( <div className="layout"> <Sidebar /> <DashboardStats /> <main>{children}</main> </div> ); }
    next: new
  5. CodeSenior

    Debounced search that drives a Server Component via the URL

    Next.jsuseSearchParamsstreaming

    Build a product search box: typing updates a ?q= URL param (debounced, so you're not navigating on every keystroke), and a Server Component reads searchParams to fetch + render matching results, showing a streaming fallback while a new query is in flight.

    next: new
  6. CodeMid

    Route protection with proxy.ts

    Next.jsproxy.tsauth

    Protect every route under /dashboard: unauthenticated visitors should be redirected to /login?next=<original path>, while public routes (marketing, /login itself) stay untouched. Implement this at the edge of the app, not by checking auth in every page.

    next: new
  7. CodeSenior

    Streamed, paginated list with Suspense

    Next.jsSuspensestreaming

    A comments section can have hundreds of entries. Render the page shell (post + comment count) instantly, then stream in a first page of 20 comments, with a "Load more" control that fetches the next page without a full page navigation.

    next: new
  8. DesignArchitect

    Design the rendering strategy for a large e-commerce catalog

    architecturerenderingISR

    A catalog has 500k product pages, a handful of category landing pages, and a cart/checkout flow. Design which pages are static, which are incrementally revalidated, and which must be fully dynamic — and why.

    next: new
  9. DesignArchitect

    Design a multi-tenant SaaS dashboard's data-fetching & caching

    architecturemulti-tenancycaching

    Design the App Router data-fetching and caching strategy for a B2B dashboard where each tenant's data must never leak into another tenant's cache, but dashboard widgets are expensive to compute and worth caching per tenant.

    next: new
  10. DesignArchitect

    Roll out a Cache Components migration safely

    architecturecachingmigrations

    You're migrating a mid-size Next.js app from the older fetch-cache/revalidate model to the new Cache Components model (cacheComponents: true, "use cache" + cacheLife/cacheTag). Design how you'd validate and roll this out without a production incident.

    next: new
  11. DesignSenior

    Design observability for a Next.js app in production

    architectureobservability

    Users are reporting the site "feels slow" but nothing looks obviously broken in a quick check. Design the observability you'd want already in place so you can diagnose this precisely instead of guessing.

    next: new