24 free prompts · all verified
Next.js prompts
Next.js prompts that get the App Router era right — server components vs client components, caching semantics, route handlers — the places where generic React advice actively misleads.
Every prompt lists the exact tool and version it was tested against.
Decide exactly where the client/server boundary belongs in your component treeReviews a component tree and pushes every 'use client' directive down to the smallest leaf that actually needs it, with a named trigger for each boundary instead of a gut-feel call.Claude CodeCursor2026-07-22Catch the Date.now()-in-cache trap before Cache Components ships it to productionAudits routes and 'use cache' functions for the frozen-timestamp trap and cross-user cache-key leaks under the Cache Components model, where dynamic is now the default and caching is the explicit opt-in.Claude CodeCursor2026-07-25Design a Route Handler that doesn't leak Express habits into the App RouterTurns an API requirement into a properly structured app/api route.ts — Web-standard Request/Response, an explicit runtime choice, real status codes, and scoped cache invalidation — instead of a ported Express handler.Claude CodeGitHub Copilot2026-07-28Build a Server Action form with real validation, not a client fetch call in disguiseWires a form directly to a Server Action with server-side schema validation, per-field errors via useActionState, and a pending button via useFormStatus, instead of a client onSubmit handler pretending to be one.Claude CodeCursor2026-07-21Write Next.js middleware that gates routes without slowing down every requestProduces a middleware.ts auth guard scoped with a real matcher config, doing only a light signature-and-expiry check at the edge instead of a full database round trip on every matched request.Claude CodeCursor2026-07-24Build a multi-panel dashboard with parallel routes instead of client-side tab stateStructures independent dashboard panels as parallel route slots that each stream, load, and error on their own, with the default.tsx behavior on hard versus soft navigation spelled out explicitly.Claude CodeCursor2026-07-26Pick a revalidation strategy instead of defaulting every page to revalidate: 60Matches ISR revalidation to how content actually changes — on-demand via revalidateTag, time-based sized to real update frequency, or no caching at all — instead of a copy-pasted 60-second default.Claude CodeCursor2026-07-27Wire up generateMetadata so every page actually gets dynamic SEO tagsAdds a proper generateMetadata function per route — real fetched data, metadataBase, canonical URLs, and explicit noindex handling — instead of a static metadata object copied across every page.Claude CodeCursor2026-07-20Audit a page for next/image misuse before Lighthouse catches itScans a page's images for missing priority hints, wrong fill/dimension usage, and un-allow-listed remote domains — the specific mistakes that quietly tank LCP and CLS without erroring at build time.Claude CodeCursor2026-07-29Turn a Pages Router codebase into a phased App Router migration, not a risky rewriteProduces a route-by-route migration plan that runs Pages Router and App Router side by side, ordered by risk, converting data-fetching methods and shared layout as it goes.Claude CodeCursor2026-07-23Design loading UI so one slow query doesn't block a whole page from paintingPlaces loading.tsx and granular Suspense boundaries around a page's actual data dependencies so fast content streams in immediately, instead of waiting on the single slowest fetch on the page.Claude CodeCursor2026-07-30Structure a monorepo running multiple Next.js apps without duplicating your design systemLays out a Turborepo workspace for several Next.js apps sharing UI, types, and config through internal packages linked via the workspace protocol, instead of code copy-pasted between app directories.Claude CodeCursor2026-07-31Find out why a route you expected to be static is rendering dynamically on every requestTraces which specific API call or import is forcing an otherwise-static route into dynamic rendering, instead of guessing at a fix from the build output symbol alone.Claude CodeCursor2026-07-27Restructure sequential awaits in a Server Component into real parallel fetchesFinds independent data requests being awaited one after another inside a Server Component and restructures them to start concurrently, without breaking the ones that genuinely depend on an earlier result.Claude CodeCursor2026-07-28Design an error.tsx hierarchy that fails at the right scope instead of taking down the whole pagePlaces error.tsx boundaries at the segment that actually owns each failure mode, distinguishes handled not-found cases from real crashes, and scopes global-error.tsx to what it can actually catch.Claude CodeCursor2026-07-29Set up environment variables so a secret never ends up in the client bundleDesigns a NEXT_PUBLIC_ vs server-only variable split across local, staging, and production, catching the specific mistake of a secret prefixed for client exposure by habit.Claude CodeCursor2026-07-30Self-host fonts with next/font without the layout-shift and FOIT tradeoffsSets up next/font to self-host and subset fonts at build time with the right fallback metrics and font-display behavior, instead of a runtime Google Fonts request or an unconfigured default that still shifts layout.Claude CodeCursor2026-07-31Structure locale-aware routing in the App Router without reaching for a heavy i18n frameworkDesigns [locale] segment routing with middleware-based locale negotiation and generateStaticParams for pre-rendering, scoped honestly to whether a dedicated i18n library is actually warranted.Claude CodeCursor2026-08-01Add optimistic UI to a Server Action mutation without letting the UI lie on failureWires useOptimistic to a Server Action so a mutation appears instantly with a real temporary identity, and defines exactly what happens to that optimistic state when the server rejects it.Claude CodeCursor2026-08-02Package a Next.js app for self-hosted deployment without guessing at a DockerfileSets up output: 'standalone' with a multi-stage Dockerfile sized to what the trace-based build actually includes, and names the ISR cache-persistence problem a naive container setup silently gets wrong.Claude CodeCursor2026-07-22Wire Auth.js session checks correctly across Server Components, Route Handlers, and middlewareSplits Auth.js session verification by layer — a light JWT check in middleware versus a full session load in a Server Component — and flags the specific database-session-strategy trap that breaks in edge middleware.Claude CodeCursor2026-08-03Write a test strategy for App Router code that doesn't pretend Server Components unit-test like hooksSeparates what App Router code is actually directly testable — Route Handlers, Server Actions — from what genuinely needs an integration or end-to-end approach, instead of forcing everything through the same unit-test pattern.Claude CodeCursor2026-07-25Audit a page for bundle bloat before reaching for next/dynamic as a reflex fixTraces a bundle-analyzer report back to specific imports and asks whether the real fix is converting a component to a Server Component, dynamically importing it, or replacing an oversized dependency — instead of wrapping everything in next/dynamic by default.Claude CodeCursor2026-07-26Turn a one-line feature request into an App Router implementation plan before touching a single fileProduces a server/client component boundary, data-fetching strategy, and file-by-file change list for a new Next.js App Router feature, so Claude Code implements it with the right rendering model instead of guessing and defaulting everything to a client component.Claude Code (Sonnet 4.6)2026-08-11
