Best AI Prompts for Next.js Application Setup with Cursor

TL;DR

Cursor’s Composer and Agent modes serve different setup purposes — Composer works best for structured, file-aware scaffolding; Agent mode works best for autonomous configuration tasks.
The folder structure prompt is the foundational setup step — a well-organized folder structure prevents the architectural drift that makes large Next.js projects hard to navigate.
Cursor’s inline editing accelerates configuration file generation — you can edit multiple config files simultaneously while AI assists with the content.
Cursor works best for setup when given explicit file path targets — asking AI to “create a proper Next.js project structure” produces better results than asking it to “set up Next.js.”
Setup prompts should specify what not to generate as well as what to generate — Cursor will fill in gaps with reasonable defaults, which are not always the defaults you want.
The best Cursor setup workflow scaffolds incrementally — foundation files first, then configuration, then business logic scaffolding.

Introduction

Cursor has rapidly become one of the most capable AI-assisted development environments, particularly for Next.js projects. Its combination of inline AI editing, Composer mode for multi-file generation, and Agent mode for autonomous task completion creates a setup workflow that can dramatically reduce the time from project initialization to meaningful development.

This guide focuses on the specific Cursor prompting techniques that produce the fastest, cleanest Next.js setup experience. The key insight is that Cursor works best when prompts are file-aware — specifying exactly what files to generate, where they should live, and what their contents should accomplish — rather than asking Cursor to “set up a Next.js project” and hoping it produces the right structure.

You will learn the specific prompts for scaffolding a production-ready Next.js foundation, configuring TypeScript and Tailwind, setting up the App Router structure, and organizing the folder hierarchy that makes large applications maintainable.

Cursor’s Setup Modes: When to Use Each
Foundation Folder Structure Prompts
TypeScript and Configuration Prompts
App Router Structure Prompts
Database and Auth Scaffolding Prompts
Component Library Scaffolding Prompts
Cursor Setup Best Practices
FAQ

Cursor’s Setup Modes: When to Use Each

Cursor offers multiple AI interaction modes, and using the right mode for each setup task dramatically affects the quality of the output.

Composer Mode: Composer is designed for multi-file generation and works by understanding your entire project context. It is the best mode for scaffold generation — creating a complete folder structure with multiple interdependent files in a single operation. Use Composer when you want Cursor to create a structured set of files based on a clear specification.

Agent Mode: Agent mode is Cursor’s autonomous task completion mode. You describe a goal, and Cursor autonomously plans and executes the steps to achieve it. For setup, Agent mode works well for configuration tasks that require multiple steps with some conditional logic — installing packages, generating config files, verifying installations. Use Agent when you have a goal like “set up Prisma with PostgreSQL and create the user schema” rather than a specific file to generate.

Inline Editing (Cmd+K): Inline editing is Cursor’s targeted AI assistance for specific sections of code. For setup, this is most useful when you need to modify an existing file rather than create a new one, or when Composer has generated a file and you need to make specific adjustments. Use inline editing for refinement, not for scaffold generation.

The Setup Mode Strategy:

Composer for foundation folder structure and base files
Agent for package installation and configuration verification
Composer for database and auth scaffold generation
Inline editing for configuration refinements

Foundation Folder Structure Prompts

The folder structure is the architecture of your application. A well-organized folder structure makes navigation intuitive and prevents the cognitive overhead of searching for files in poorly organized projects.

Folder Structure Prompt (Composer):

Create a production-ready Next.js project folder structure for [PROJECT TYPE].

Technology stack:
- Next.js [VERSION] with App Router
- TypeScript in strict mode
- Tailwind CSS for styling
- [PRISMA / DRIZZLE / no ORM] for database
- [NEXT-AUTH v5 / CLERK / no auth]

Project type: [SaaS application / Content site / E-commerce / Internal tool]

Create the following folder structure under ./src/:

app/                    — Next.js App Router pages and layouts
  (folder)/
  layout.tsx
  page.tsx
  globals.css
  not-found.tsx
  error.tsx

components/
  ui/                   — Base UI components (buttons, inputs, cards)
  layout/              — Layout components (header, footer, sidebar)
  (domain)/             — Feature-specific components grouped by domain

lib/
  db/                   — Database client and utilities
  auth/                 — Auth configuration and utilities
  utils/                — General utilities (cn helper, format currency, etc.
  validators/           — Zod schemas for form and API validation

hooks/                  — Custom React hooks
types/                  — Shared TypeScript types
constants/               — Application constants

api/                    — API route handlers (if using Pages Router API routes)
  (route)/

Please create ONLY the folder structure and empty index.ts files in each folder with brief comments describing what each folder is for. Do not create any implementation files yet.

Why This Works: The explicit instruction “create ONLY the folder structure and empty index.ts files” prevents Cursor from generating implementation files prematurely. Foundation first, implementation second.

TypeScript and Configuration Prompts

TypeScript configuration for Next.js requires specific settings that interact with Next.js’s build system. Cursor can generate these accurately when given the right context.

TypeScript Config Prompt (Composer):

Update the following TypeScript configuration files for a production Next.js project.

Current tsconfig.json:
[PASTE CURRENT tsconfig.json]

Requirements:
- Strict TypeScript with strictest settings
- Path aliases: @/ for src/, @/components for components/, etc.
- Next.js TypeScript plugin enabled
- No implicit any in strict mode
- DOM types properly configured

Please provide the complete updated tsconfig.json with best practice settings for Next.js 15 with App Router.

Tailwind Config Prompt (Composer):

Create a production-ready Tailwind CSS configuration for a Next.js project with the following design system.

Brand colors:
- Primary: [HEX CODE] — for primary actions
- Secondary: [HEX CODE] — for secondary elements
- Accent: [HEX CODE] — for highlights
- Background: [HEX CODE] / [HEX CODE]
- Text: [HEX CODE] (foreground) / [HEX CODE] (muted)

Typography:
- Font family: [INTER / ROBOTO / CUSTOM GOOGLE FONT]
- Scale: [standard Tailwind scale with custom sizes if needed]

Components needed:
- Card component with consistent padding and border radius
- Button component with primary/secondary/destructive variants
- Input component with consistent focus states

Please provide:
1. tailwind.config.ts with design system tokens
2. Updated globals.css with @tailwind directives and custom CSS variables
3. Any PostCSS configuration if needed

App Router Structure Prompts

Next.js App Router requires understanding the relationship between layouts, pages, loading states, and error handling. Cursor can scaffold this structure correctly when you specify the routing architecture.

App Router Scaffold Prompt (Composer):

Create the App Router foundation for a Next.js application with the following structure.

Application structure:
- Public pages: landing page, pricing, about, contact
- Authenticated pages: dashboard, settings, [specific feature pages]
- Auth pages: login, signup, forgot-password, reset-password

Design system:
- Tailwind CSS with CSS variables
- shadcn/ui components
- Dark mode support: [YES/NO]

Layout hierarchy:
1. Root layout (providers: theme, auth, query client)
2. Group layouts for: (marketing) public pages, (app) authenticated pages, (auth) auth pages

Error handling:
- Each route group needs its own error.tsx and loading.tsx

Required files for each route group:

marketing group:
app/(marketing)/
  layout.tsx          — Marketing layout with public header/footer
  page.tsx            — Landing page
  pricing/page.tsx
  about/page.tsx
  contact/page.tsx
  loading.tsx
  error.tsx

app group:
app/(app)/
  layout.tsx          — App layout with app navigation
  dashboard/page.tsx
  settings/page.tsx
  loading.tsx
  error.tsx

auth group:
app/(auth)/
  layout.tsx          — Minimal centered layout for auth pages
  login/page.tsx
  signup/page.tsx
  loading.tsx
  error.tsx

Please create all route files with:
- Proper TypeScript types
- Basic but meaningful placeholder content (not just "Page")
- Proper metadata exports where applicable
- Suspense boundaries where appropriate

Database and Auth Scaffolding Prompts

Database and authentication scaffolding requires careful attention to the integration points between Next.js Server Components, API routes, and the client.

Prisma Schema Prompt (Composer):

Create a Prisma database schema for a [SaaS / E-commerce / Content platform] Next.js application.

Required models:

User:
- id: cuid
- email: unique
- name: string?
- image: string?
- emailVerified: datetime?
- createdAt, updatedAt
- Relations: accounts, sessions, organizations, posts

Account (for OAuth):
- id, userId, type, provider, providerAccountId
- refresh_token, access_token, expires_at, token_type, scope
- Relations: user

Session:
- id, sessionToken, userId, expires
- Relations: user

Organization:
- id, name, slug, logo?, description?
- Relations: members (users through OrganizationMember)

OrganizationMember:
- userId, organizationId, role (OWNER | ADMIN | MEMBER)
- Relations: user, organization

[ADDITIONAL MODELS SPECIFIC TO PROJECT TYPE]

Please provide:
1. Complete prisma/schema.prisma file
2. lib/db.ts singleton for Prisma Client (SSR-safe for Next.js App Router)
3. Basic seed file for development
4. Example query file in lib/db/ showing how to query common patterns

Auth Configuration Prompt (Composer):

Configure NextAuth.js v5 for a Next.js 15 application with the following requirements.

Auth providers:
- Google OAuth
- GitHub OAuth
- Email/password (using credentials provider with hashed passwords)

User model: Prisma user model (from existing schema)

Session strategy: JWT

Callbacks needed:
- session callback: include user id and organization id in session
- jwt callback: include user id and organization id in token

Pages required:
- /login (custom login page)
- /signup (custom signup page)
- /auth-error (error page for auth failures)

Middleware:
- Protect /dashboard/* and /settings/* routes
- Redirect to /login if unauthenticated
- Allow /login and /signup without auth

Please provide:
1. auth.ts configuration file (NextAuth v5 app router structure)
2. middleware.ts for route protection
3. api/auth/[...nextauth]/route.ts handler
4. Login and signup page components with proper form handling
5. auth.config.ts for middleware-compatible configuration (if using NextAuth beta)

Component Library Scaffolding Prompts

A well-scaffolded component library prevents the design inconsistency that plagues rapidly built Next.js applications. Cursor can generate the foundational component structure that makes consistent design easy.

Component Library Prompt (Composer):

Scaffold a shadcn/ui-based component library for a Next.js application.

Base components needed:
- button (variants: default, secondary, outline, ghost, destructive, link)
- input (with label, error message, helper text slots)
- card (header, content, footer, with card-title, card-description)
- form (using react-hook-form + zod)
- badge (variants: default, secondary, outline, destructive)
- avatar (with fallback, image support)
- dropdown-menu (for navigation and actions)
- dialog (modal with open/close state)
- select (with options, label support)
- textarea (with label, error message, helper text)

Form components needed:
- FormField wrapper for react-hook-form + zod integration
- Example: form-input, form-select, form-textarea

Navigation components needed:
- main-nav (horizontal navigation)
- user-nav (user dropdown with settings, signout)
- sidebar (collapsible sidebar for app pages)

Please generate:
1. Installation commands to add shadcn/ui components
2. The component files with proper TypeScript types
3. A component usage example file showing how to compose them
4. A component index file exporting all components cleanly

Cursor Setup Best Practices

Best Practice 1: Name Files Explicitly in Prompts Cursor works best when you name files explicitly rather than asking for “the appropriate files.” “Create app/dashboard/page.tsx and app/dashboard/layout.tsx” produces better results than “create the dashboard route structure.”

Best Practice 2: Specify What NOT to Generate Cursor will often generate more than you ask for. Explicitly excluding implementation files at the foundation stage prevents premature optimization and keeps the setup incremental.

Best Practice 3: Use Composer for Multi-File Scaffolding When you need multiple files generated together (like a complete feature scaffold), use Composer mode rather than making multiple inline edits. Composer’s cross-file awareness produces more consistent code.

Best Practice 4: Verify Generated Configs Against Docs Configuration files (tsconfig, next.config, Tailwind config) change frequently. Always verify Cursor’s generated configuration against the current official documentation, especially for Next.js version-specific settings.

Best Practice 5: Commit After Foundation, Not After Every Step Commit your repository after the foundation layer is stable. This gives you a clean rollback point before subsequent layers are added, without the complexity of managing half-implemented features in version history.

FAQ

How does Cursor’s setup compare to manual Next.js configuration? Cursor can scaffold in minutes what takes hours manually. The quality is comparable to manual setup when prompts are specific and Cursor-generated configs are verified against current documentation. The main advantage is speed; the main risk is version drift if generated configs become outdated.

What should I do if Cursor generates a file that conflicts with an existing file? Cursor will warn you about conflicts in Composer mode. Review the diff carefully. If the existing file is correct, reject the generation. If the new file is better, accept it and verify the merge makes sense before committing.

Can Cursor help me migrate from Pages Router to App Router? Yes, but it requires a careful, incremental approach. Start by asking Cursor to analyze your current Pages Router structure and identify what needs to change. Then request migration of individual route groups or features rather than the entire application at once.

How do I keep Cursor’s setup suggestions aligned with my team’s conventions? Add a README or .cursorrules file to your project root that specifies your team’s conventions. Cursor reads this file and aligns its suggestions with your documented practices.

What is the most common Cursor setup mistake? Accepting Cursor’s first generation without review. Like all AI code generation, Cursor’s first output is a draft. Always review generated configuration files for correctness before running them, especially for security-sensitive configurations like auth.

Conclusion

Cursor transforms Next.js setup from a manual configuration chore into an AI-assisted scaffolding workflow that produces production-ready foundations in a fraction of the traditional time. The key is using Composer mode for multi-file scaffold generation, specifying explicit file targets, and maintaining an incremental setup sequence that respects the dependency chain between foundation, configuration, and business logic layers.

Key Takeaways:

Use Composer mode for multi-file scaffold generation — it has cross-file awareness that inline editing lacks.
Explicitly name files and folders in prompts rather than asking for “appropriate structure.”
Specify what NOT to generate to prevent premature implementation files at the foundation stage.
Verify generated configuration files against current Next.js documentation, especially for version-specific settings.
Commit after the foundation layer is stable — this gives you a clean rollback point before adding implementation layers.
Build a .cursorrules file with your team’s conventions to keep Cursor aligned with your practices across sessions.

Next Step: Open Cursor and run the Foundation Folder Structure prompt from this guide for your next Next.js project. Notice how explicit file targets and folder specifications produce a cleaner scaffold than open-ended setup requests. Then incrementally add the configuration, auth, and database layers using the prompts in each section.

Best AI Prompts for Next.js Application Setup with Cursor