The Complete Prompt Guide for Building Next.js Websites with AI

Why Next.js Prompts Are Different

Building a Next.js app with AI is fundamentally different from building a vanilla React app. Next.js has strong opinions about routing, data fetching, and rendering — and if your prompt doesn't specify how you want each of these handled, the AI will make choices you might regret later.

This guide covers exactly what to include in a Next.js prompt to get production-quality scaffolding on the first pass.

App Router vs Pages Router — Make the Call in Your Prompt

This is the single most important Next.js-specific choice. App Router (the `app/` directory, introduced in Next.js 13) uses React Server Components, async layout nesting, and a different data-fetching model. Pages Router is the older system, still supported, but no longer the recommended default.

For any new project in 2026, use App Router. But you must say so explicitly: "Next.js 16 with App Router." Without this, the AI might default to Pages Router based on older training data.

App Router prompt addition: "Use the App Router (`app/` directory). Use Server Components by default; add `'use client'` only for components that require browser APIs or React hooks. Use `async` page components for data fetching."

Data Fetching Pattern

App Router changed data fetching completely. There's no `getServerSideProps` or `getStaticProps`. Instead, you fetch data directly in async Server Components or use Server Actions for mutations.

Be specific about which pattern you want:

- Server Components with direct fetch: "Fetch data in Server Components using native `fetch()`. Use `unstable_cache` from `next/cache` for revalidation." - Server Actions for forms: "Use Next.js Server Actions (`'use server'`) for all form submissions and data mutations. No API routes." - API Routes for external consumers: "Create REST API routes in `app/api/` for endpoints that will be consumed by mobile apps."

Key Libraries to Mention

Specify each library by name and version. AI models know these libraries well, but combining them without guidance often produces integration errors:

- Tailwind: "Tailwind CSS v4 with `@import 'tailwindcss'` in globals.css" - Components: "Shadcn/UI components (installed manually, not via CLI). Use Radix UI primitives directly where Shadcn doesn't have a component." - Database: "Prisma ORM with PostgreSQL. Schema in `prisma/schema.prisma`. Use Prisma Client in Server Components only." - Auth: "Auth.js v5 (NextAuth) with GitHub and Google providers. Session in server components via `auth()` from `@/lib/auth`." - Forms: "React Hook Form with Zod resolvers. Define schemas in `lib/schemas/` and import them in both client forms and Server Actions."

A Complete Next.js SaaS Prompt Example

``` Build a SaaS analytics dashboard called Metric using Next.js 16 App Router and TypeScript.

STACK: - Next.js 16 App Router, TypeScript strict mode - Tailwind CSS v4, Shadcn/UI (slate base color) - Prisma ORM + PostgreSQL (hosted on Railway) - Auth.js v5 with GitHub OAuth - Stripe for subscriptions (monthly/annual plans) - Recharts for data visualization - Deployed to Vercel with preview deployments

STRUCTURE: - /app/(marketing): landing page, pricing, blog - /app/(app): protected dashboard routes - /app/api: webhook handlers for Stripe

PAGES: Homepage, Pricing, Dashboard (overview), Analytics, Settings, Billing

FEATURES: Auth-protected dashboard, Stripe subscription gate (free/pro tiers), CSV data import, line/bar/pie chart visualizations, team invites

CODE CONVENTIONS: Named exports everywhere except page.tsx files. Zod schemas in lib/schemas/. Server Actions for mutations. No client-side data fetching except for SWR on dashboard. ```

Let WebPromptify Generate This

The prompt above took about 20 minutes to write. WebPromptify generates a complete, structured Next.js prompt in under 2 minutes — walk through the 4-step form, get a ready-to-paste result. Free, no account required.