How I Build Next.js Projects with AI
September 24, 2026 Avishka Devinda
September 24, 2026 Avishka Devinda
AI coding agents have changed how quickly I can build a Next.js project.
I can create routes, components, forms, database schemas, tests, and deployment configuration much faster than before.
But there is a big difference between asking AI to generate an app and using AI as part of a real development workflow.
I prefer the second approach.
The agent can do a lot of the work, but I still want the project architecture, constraints, tests, and final decisions to be explicit.
Before asking an agent to build anything, I define what the application actually needs.
For a small SaaS project, that might be:
Next.js
TypeScript
Tailwind CSS
shadcn/ui
Drizzle ORM
Neon Postgres
Zod
React Hook Form
Zustand
Better Auth
Resend
But the stack is not the product.
I also write down:
This gives the agent a boundary.
Without that boundary, AI can generate a lot of code that technically works but does not form a clean system.
A good coding agent should not have to rediscover the same rules every session.
That is where AGENTS.md becomes useful.
I use it to describe things such as:
Use the existing package manager.
Do not change the visual design.
Prefer Server Components.
Keep secrets server-side.
Run the build before finishing.
Do not merge without approval.
Those rules are much more useful than repeating them in every prompt.
The agent starts with a better understanding of the repository.
One of the worst prompts is:
Build this feature.
without letting the agent understand the existing code.
I prefer a workflow like:
1. Inspect the current implementation
2. Identify the relevant files
3. Understand existing patterns
4. Make the smallest correct change
5. Run checks
6. Verify the UI
7. Review the diff
This is especially important in a mature project.
The fastest code change is not useful if it breaks the design, duplicates an existing component, or adds a second architecture beside the first one.
I am comfortable letting an agent write a lot of code.
For example:
But I still want to understand decisions that affect the architecture.
If an agent wants to add a new dependency, replace the auth system, change the database pattern, or move a route to a different runtime, that deserves more thought.
AI is most useful when it removes mechanical work without hiding important engineering decisions.
This matters more than people think.
AI models know a lot about Next.js, but Next.js changes quickly.
An agent can confidently generate an API that was correct one year ago and wrong today.
Modern Next.js versions include framework documentation inside the installed package.
That means the agent can inspect the version-matched docs instead of depending only on training data.
For a Next.js project, I want the installed version of the framework to be the source of truth.
Some tasks need more than a few instructions.
For example:
That is where agent Skills are useful.
Instead of putting a huge workflow inside AGENTS.md, I can keep the baseline rules small and install a task-specific Skill.
For current Next.js workflow skills:
npx skills add vercel/next.js
Or install one specific workflow:
npx skills add vercel/next.js --skill next-dev-loop
The important part is that the agent gets an actual procedure, not only more background information.
AI-generated code should not be considered finished because TypeScript compiles.
I want the agent to check the actual application.
That means:
For important flows, I also add Playwright tests.
A test gives the agent a target that is much better than "looks good."
I prefer letting an agent work on a branch.
For example:
main
↓
feature/contact-form
or:
deploy-fix
↓
new-posts
This gives me a clean diff and a safe place to inspect the work.
If the result is wrong, I do not have to repair production history.
A page can look correct while the implementation is bad.
Before merging, I check:
AI is very good at producing changes.
The diff tells me whether those changes belong in the project.
My normal AI-assisted Next.js workflow is roughly:
Idea
↓
Write product constraints
↓
Create branch
↓
Agent reads AGENTS.md
↓
Agent inspects existing code
↓
Use relevant Skills/docs
↓
Implement small steps
↓
Run lint/type/build checks
↓
Browser verification
↓
Review diff
↓
Preview deployment
↓
Merge
The agent handles a large amount of implementation work.
But the workflow keeps the project understandable.
I do not think the best way to build with AI is to give it one giant prompt and hope the generated application is good.
The better approach is to create an environment where the agent can make good decisions repeatedly.
For me, that means:
With those pieces in place, AI becomes much more than autocomplete.
It becomes a useful development partner without becoming the owner of the architecture.