AI Prompts for Cursor for Next.js
20 tested prompts across 4 stages. Works with ChatGPT, Claude, and Gemini.
Build production-quality Next.js applications faster using Cursor with the App Router, Server Components, and modern Next.js patterns. This guide walks you through every stage of Cursor for Next.js, from Set up Next.js projects all the way through Next.js performance and deployment, with a tested, copy-ready prompt at each step. Each stage targets a specific phase of the process so you always know exactly what to ask and what output to expect. Works with ChatGPT, Claude, and Gemini and any other major AI tool.
Stage 1
Set up Next.js projects
Start here to scaffold and configure a Next.js project with the right foundations.
Create a new Next.js app
Help me set up a new Next.js 14+ app with: TypeScript, Tailwind CSS, and ESLint. Create the initial folder structure following App Router conventions. What should go in app/, components/, lib/, and types/?
Configure Next.js
Help me configure next.config.ts for [DESCRIBE REQUIREMENTS: IMAGE DOMAINS, REWRITES, ENVIRONMENT VARIABLES, BUNDLE ANALYSIS]. Show the full config with comments explaining each option.
Set up environment variables
Set up environment variables for my Next.js app. I need: [LIST VARIABLES AND WHETHER THEY ARE SERVER-ONLY OR CLIENT-ACCESSIBLE]. Create the .env.example file and show how to access each in code.
Set up a monorepo
Help me set up a Next.js app inside a monorepo using [TURBOREPO / PNPM WORKSPACES]. Show the workspace structure, how to share components and types, and the build configuration.
Configure middleware
Write Next.js middleware for [DESCRIBE WHAT MIDDLEWARE SHOULD DO: AUTH CHECKING, REDIRECTS, A/B TESTING, LOCALE DETECTION]. Show the matcher config and the middleware logic.
Stage 2
Build App Router pages
These prompts help you build pages and layouts using the Next.js App Router correctly.
Create a page with data fetching
Create a Next.js App Router page at [ROUTE] that fetches data from [DESCRIBE DATA SOURCE]. Use async Server Components for the data fetching and TypeScript throughout.
Set up dynamic routes
Create a dynamic route at app/[SLUG]/page.tsx that: generates all paths at build time with generateStaticParams, fetches data for each slug, and handles the not-found case.
Add loading and error states
Add loading.tsx and error.tsx files for the route at [ROUTE PATH]. loading.tsx should show a skeleton that matches the layout. error.tsx should handle errors gracefully with a retry option.
Create a layout
Create a Next.js layout.tsx for [DESCRIBE LAYOUT: DASHBOARD WITH SIDEBAR, DOCS WITH NAVIGATION]. Include: metadata, shared navigation, and how to pass data to layout components.
Add metadata and SEO
Add proper metadata to this Next.js page: [PASTE PAGE CODE OR DESCRIBE IT]. Use the Next.js metadata API to add: title, description, OpenGraph tags, Twitter cards, and canonical URL.
Stage 3
Server Components and Actions
Use these prompts to implement Server Components and Server Actions effectively.
Write a Server Component
Write a React Server Component for [DESCRIBE THE COMPONENT]. It should fetch its own data without any client-side JavaScript. Show what to move to a client component if interactivity is needed.
Create a Server Action
Write a Next.js Server Action for [DESCRIBE THE OPERATION: FORM SUBMISSION, DATABASE MUTATION, FILE UPLOAD]. Include: the "use server" directive, validation, error handling, and how to call it from a form.
Mix Server and Client Components
I have this feature that needs both server data fetching and client interactivity: [DESCRIBE THE FEATURE]. Show how to split it into Server and Client Components properly.
Use streaming
Add streaming to this Next.js page so slow data doesn't block the initial render: [PASTE PAGE CODE]. Use Suspense boundaries and loading fallbacks to stream each section independently.
Optimize data fetching
Review and optimize the data fetching in this Next.js page: [PASTE CODE]. Remove waterfalls, add parallelization with Promise.all, and use Next.js caching correctly.
Stage 4
Next.js performance and deployment
These prompts help you optimize performance and prepare your app for production.
Optimize images
Optimize the images in this Next.js page: [PASTE CODE]. Use next/image correctly with proper sizes, priority loading for above-the-fold images, and correct width/height or fill prop usage.
Set up caching
Explain and configure caching for this Next.js page/route: [DESCRIBE THE ROUTE AND DATA]. What revalidation strategy should I use? When should I use no-store, revalidate, or default cache?
Analyze bundle size
Help me reduce the bundle size of this Next.js page: [PASTE PAGE CODE]. Identify large dependencies, suggest lazy loading opportunities, and show how to use next/dynamic for heavy components.
Set up API routes
Create a Next.js API route at app/api/[ROUTE]/route.ts that handles [DESCRIBE THE API]. Include: GET and POST handlers, request validation, error responses, and TypeScript types.
Prepare for production
Review this Next.js app for production readiness: [DESCRIBE THE APP OR PASTE KEY FILES]. Check for: missing error handling, security headers, environment variable leaks, and performance issues.
Frequently asked questions
Should I use App Router or Pages Router?+
Use App Router for all new projects. It is the current standard with Server Components, streaming, and better data fetching patterns. Pages Router is only for maintaining existing codebases.
How does Cursor help with Next.js specifically?+
Cursor understands Next.js App Router conventions, file-based routing, Server Components, Server Actions, and caching strategies. It generates code that follows current Next.js patterns, not outdated patterns from older versions.
When should I use Server Components versus Client Components?+
Use Server Components for data fetching, database access, and static rendering. Use Client Components (with "use client") only when you need browser APIs, event handlers, useState, or useEffect. Most components should be server-first.
How do I handle authentication in Next.js with Cursor?+
Ask Cursor to set up authentication with your preferred library (Auth.js, Clerk, Supabase Auth). It can write the middleware, session handling, protected routes, and Server Action authentication patterns.
Can Cursor help me migrate from Pages Router to App Router?+
Yes. Show Cursor your Pages Router code and ask it to convert it to App Router patterns: getServerSideProps becomes async Server Component data fetching, API routes become Route Handlers, and layout wrappers become layout.tsx files.
Other prompt packages you might like
AI Prompts for Cursor for React Development
Frontend developers often face challenges in streamlining their React development process.
See prompts
AI Prompts for Cursor for TypeScript
TypeScript developers often face challenges in managing complex codebases and improving productivity.
See promptsAI Prompts for Cursor for Debugging
Debugging code can be time-consuming and frustrating for developers.
See prompts