Coding Prompts for Debugging a Next.js Application

A good debugging prompt begins with the smallest reproducible behavior: the route or component, the action that triggers the issue, the expected result, and the actual result. Include the exact error text and relevant environment versions.

Avoid pasting the entire repository when a focused slice will do. Large, unrelated context makes it easier for an assistant to miss the controlling code path and suggest a broad rewrite.

Require the assistant to name the likely cause and one cheap check that could disprove it. A hydration warning might be caused by a client-only value, but the first check should inspect where that value is read during render.

Once the hypothesis is tested, provide the result and ask for the smallest repair. Keep the original behavior and public API unless evidence requires a change.

State what must remain true after the fix: the page still builds, the route preserves its response shape, loading and error states remain usable, and unrelated tests do not change. Ask for a focused test or command that validates the behavior.

For security-sensitive code, request input validation, authorization checks, and safe error handling explicitly. Never treat an AI-generated patch as proof that a vulnerability is fixed.

Use this sequence: reproduce, hypothesize, inspect, patch, run the narrow check, then broaden validation. PromptFlow coding prompts work best when you add actual logs and constraints from your project instead of copying them unchanged.