Build a Next.js app with AI by fixing the exact framework version and project conventions, then implementing one complete route with explicit data, rendering, and authorization boundaries. Current Next.js behavior changes over time, so give the agent the installed version and use matching official documentation.
Define the user journey, route structure, data sources, caching expectations, loading and error states, and which logic must run on the server or client. Create the project with a supported setup or inspect the existing repository first. Ask the agent for a file-impact plan before adding components. Implement a vertical slice with typed inputs, accessible interface states, server-side permission checks, and a focused test. Run linting, types, tests, and the production build. Inspect environment variables, bundled code, and logs so secrets and private data do not cross into the browser.
Avoid generating a large route tree from a vague product description. Shared layouts, data helpers, and abstractions should emerge from repeated needs, not speculation. Treat authentication, payments, uploads, and mutations as separate risk reviews.
Start with a route that reads and changes one small piece of data, including forbidden and failure paths. Once its build, runtime behavior, and deployment configuration are verified, reuse the pattern. AI works best when every Next.js task names the current version, boundary, and observable acceptance result.
