12 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" boundary down to the smallest leaf that actually needs interactivity, with a named reason for each one.Cursor 2.1Claude Code2026-07-14Catch the Date.now()-in-cache trap before Cache Components ships it to productionAudits a route or component for caching correctness under the Cache Components model, flagging any dynamic API call trapped inside a "use cache" boundary.Claude CodeCursor 2.12026-07-30Design a Route Handler that doesn't leak Express habits into the App RouterTurns an API requirement into a properly structured app/api route.ts — right runtime, right status codes, right cache invalidation, not a copy-pasted Express handler.Claude CodeGitHub Copilot2026-07-22Build a Server Action form with real validation, not a client fetch call in disguiseProduces a form wired to a Server Action with schema validation, per-field errors, and useActionState-driven pending/error UI instead of hand-rolled loading state.Claude CodeCursor 2.12026-07-18Write 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 session check at the edge instead of a full database round trip on every request.Claude CodeCursor 2.12026-07-11Build 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, instead of one component juggling tab state and a single spinner.Claude CodeCursor 2.12026-07-24Pick a revalidation strategy instead of defaulting every page to revalidate: 60Matches ISR revalidation to how content actually changes — time-based, on-demand via revalidateTag, or a mix — instead of a copy-pasted 60-second default.Claude CodeCursor 2.12026-07-09Wire up generateMetadata so every page actually gets dynamic SEO tagsAdds a proper generateMetadata function per route — dynamic title/description from real data, canonical URLs, and Open Graph images — instead of a static object copied across pages.Claude CodeCursor 2.12026-07-05Audit 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 mistakes that quietly tank LCP and CLS.Claude CodeCursor 2.12026-07-27Turn 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, converting data-fetching methods and shared layout as it goes.Claude CodeCursor 2.12026-07-19Design 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 slowest fetch.Claude CodeCursor 2.12026-07-21Structure a monorepo running multiple Next.js apps without duplicating your design systemLays out a Turborepo/pnpm workspace for several Next.js apps sharing UI, types, and config through internal packages instead of copy-pasted code.Claude CodeCursor 2.12026-07-13
