10 Claude Prompts Every React and Next.js Developer Should Save

Claude is only as useful as the question you ask it. “Fix my code” gets a plausible answer; a prompt that names the failure mode, the constraints and the shape of a good answer gets a correct one. These are the ten prompts I reuse most as a React and Next.js developer, each with a short note on why it is worded the way it is.

They work in the Claude apps and in Claude Code — where you can drop the [paste …] parts entirely, because Claude reads the files itself.

Want this built for you? Use code CLAUDE10 for 10% off your first Claude API integration project. Start a project

Three principles behind every prompt

• Say what good looks like.“Ranked by severity”, “one test per failure mode”, “under 60 characters”. A specified output is a checkable output.
• Give the reason, not just the rule.“No snapshot tests, because they break on every markup change” generalises far better than the bare instruction.
• Ask for diagnosis before treatment. For bugs and performance especially, the cause is the valuable part. A fix for the wrong cause is worse than no fix.

The prompts

1. Review a component like a senior engineer

Asking for a ranked list forces prioritisation. Without it you get twenty equally-weighted nitpicks and the one real bug is item fourteen.

Review this React component as a senior engineer would in a PR.
List problems in order of severity: bugs first, then performance,
then accessibility, then style. For each, quote the line and show the fix.
Skip anything that is purely a matter of taste.

[paste component]

2. Decide what should be a Server Component

The most common App Router mistake is a 'use client' too high in the tree. This makes Claude draw the boundary explicitly.

Here is a Next.js App Router page and its child components.
Mark which components must be Client Components and why (state, effects,
event handlers, browser APIs). Then suggest the lowest possible
'use client' boundary and show how to pass server-rendered content
through as children.

[paste files]

3. Find the cause of unnecessary re-renders

Pointing at the symptom and asking for the cause beats asking 'how do I optimise this' — which tends to produce useMemo on everything.

This list re-renders every row when one item changes.
Explain exactly which reference changes on each render and why that
defeats React.memo here. Give the minimal fix — don't wrap things in
useMemo/useCallback unless that specific reference is the cause.

[paste parent and row components]

4. Write tests that would actually catch regressions

'Write tests' gets you snapshot tests of the happy path. Naming the failure modes gets you tests worth keeping.

Write tests for this hook using React Testing Library.
Before writing any test, list the ways this hook could break in a future
refactor (race conditions, stale closures, cleanup, error states).
Then write one focused test per failure mode. No snapshot tests.

[paste hook]

5. Generate metadata and structured data for a page

Claude is good at the mechanical half of SEO — consistent titles, descriptions within length, valid JSON-LD — which is exactly the part people skip.

Write a Next.js generateMetadata function and matching JSON-LD for
this page. Title under 60 characters with the primary keyword first,
description 140–160 characters, canonical URL, Open Graph and Twitter
cards. Choose the most specific schema.org type and explain why.

Page purpose: [one sentence]
Primary keyword: [keyword]
URL: [url]

6. Audit accessibility before a client does

Asking for WCAG criteria by number keeps the answer concrete and checkable rather than generic advice.

Audit this form for accessibility against WCAG 2.2 AA.
For each issue: the success criterion number, what a screen-reader or
keyboard user would experience, and the corrected JSX.
Include focus management after submit and error announcement.

[paste form component]

7. Debug from the error, not from a guess

Asking for hypotheses ranked by likelihood — plus how to confirm each — turns a guessing game into a checklist.

I'm getting this error in production but not locally:

[paste error and stack trace]

List the three most likely causes, ranked. For each, tell me what
evidence would confirm or rule it out, and what to log to get it.
Don't propose a fix until we know which cause it is.

8. Plan a framework migration

Migrations fail in the long tail. Asking for the risky parts first front-loads the surprises.

I'm upgrading this app from Next.js [old version] to [new version].
Based on the files below, list every breaking change that affects THIS
codebase (not the general changelog), ordered by risk. For each one,
name the files touched and whether the failure shows up at build time
or only at runtime.

[paste package.json, next.config, and representative routes]

9. Get oriented in an unfamiliar codebase

A request-lifecycle trace teaches you the architecture faster than any README — and exposes where the README is out of date.

Trace what happens when a user submits the login form in this
codebase, from the click to the authenticated page render. Name each
file and function in order. Flag anything that looks inconsistent or
surprising.

10. Sanity-check a client estimate

Freelancers under-estimate the unglamorous parts. A second opinion on the list of tasks — not the hours — is where the value is.

A client wants: [feature description].
Break this into the tasks a professional implementation needs,
including the ones clients don't think about (auth edge cases, empty and
error states, emails, admin tooling, analytics, accessibility, tests,
deployment). Flag the tasks with the most uncertainty.

Make them stick

Prompts you retype are prompts you stop using. In Claude Code, save the ones you rely on as custom slash commands, and move standing rules (“no snapshot tests”, “Server Components by default”) into the project's CLAUDE.md so they apply without being asked. In the Claude apps, a Project with these as instructions does the same job.

Want to wire Claude into your own product instead? The streaming chat tutorial for Next.js covers the API end to end.