Next.js SaaS Kickoff Prompt Pack

Create a new Next.js project with the following exact configuration:
 
- Next.js 15+ with App Router (NOT Pages Router)
- TypeScript in strict mode
- Tailwind CSS v4
- src/ directory structure
- ESLint with Next.js recommended config
 
After creating the project, set up the following directory structure:
src/app/(auth)/ — for sign-in, sign-up pages
src/app/(dashboard)/ — for authenticated pages
src/app/(marketing)/ — for public pages
src/components/ui/ — for shadcn/ui components
src/components/shared/ — for custom shared components
src/lib/ — for utilities, database, auth helpers
src/server/ — for server-only code (actions, queries)

Add Clerk authentication to my Next.js project:
 
1. Install @clerk/nextjs
2. Create src/middleware.ts with clerkMiddleware() — protect all routes
   under (dashboard), keep (marketing) and (auth) public
3. Create sign-in page at src/app/(auth)/sign-in/[[...sign-in]]/page.tsx
4. Create sign-up page at src/app/(auth)/sign-up/[[...sign-up]]/page.tsx
5. Add ClerkProvider to the root layout
6. Create a UserButton component in the dashboard header
7. Create src/lib/auth.ts with a helper: getCurrentUser() that returns
   the userId, email, and role or redirects to sign-in
 
Style the Clerk components to match a dark theme with zinc-950 background
and emerald-400 accents.
 
Environment variables needed (I'll add the values):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Set up Drizzle ORM with Neon PostgreSQL for my Next.js SaaS:
 
1. Install drizzle-orm, @neondatabase/serverless, drizzle-kit
2. Create drizzle.config.ts pointing to DATABASE_URL env var
3. Create src/server/db/index.ts — initialize drizzle with Neon serverless driver
4. Create src/server/db/schema.ts with these tables:
   - users: id (uuid), clerkId (unique), email, name, plan (enum: free/pro),
     createdAt, updatedAt
   - Add 2-3 tables relevant to a SaaS (projects, project_members, activity_log)
5. Create src/server/db/queries/ directory with typed query helpers:
   - getUserByClerkId(clerkId)
   - createUser(data)
   - updateUserPlan(clerkId, plan)
6. Add scripts to package.json: db:push, db:studio, db:generate
 
Use the serverless Neon driver, NOT the node-postgres driver.
All queries must be fully type-safe with Drizzle infer types.

Create the API layer for my Next.js SaaS using Server Actions and Route Handlers:
 
1. Create src/server/actions/ directory for Server Actions:
   - src/server/actions/user.ts — updateProfile, deleteAccount
   - src/server/actions/project.ts — createProject, updateProject, deleteProject
2. Each action must:
   - Verify auth with getCurrentUser()
   - Validate input with Zod schemas
   - Return typed success/data or success:false/error objects
3. Create src/app/api/webhooks/clerk/route.ts:
   - Handle user.created and user.deleted events
   - Sync Clerk users to database
   - Verify webhook signature with svix
4. Create src/lib/api.ts with a type-safe action wrapper:
   - Handles auth check, error catching, and consistent response format
 
Do NOT use Route Handlers for anything that could be a Server Action.
Route Handlers are ONLY for webhooks and external API consumers.

Build the authenticated dashboard layout and core pages:
 
1. src/app/(dashboard)/layout.tsx — sidebar navigation + top bar with UserButton
   - Sidebar: collapsible on mobile, shows nav items with icons
   - Top bar: breadcrumbs + UserButton + notification bell placeholder
2. src/app/(dashboard)/page.tsx — dashboard home
   - Welcome message with user name
   - Quick stats cards (projects count, recent activity)
   - Recent activity list
3. src/app/(dashboard)/projects/page.tsx — project list
   - Grid of project cards with create button
   - Empty state for new users
4. src/app/(dashboard)/projects/[id]/page.tsx — project detail
   - Tab layout: Overview, Settings, Members
5. src/app/(dashboard)/settings/page.tsx — user settings
   - Profile form (name, email display)
   - Plan display with upgrade CTA
   - Danger zone (delete account)
 
Use shadcn/ui components throughout. All pages must be responsive.
Fetch data with server components where possible, client components only
for interactivity.

Prepare my Next.js SaaS for production deployment on Vercel:
 
1. Create vercel.json with:
   - Security headers (HSTS, X-Frame-Options, CSP)
   - Cron job config for any scheduled tasks
2. Update next.config.ts:
   - Enable image optimization with allowed domains
   - Set up redirects for common URL patterns
   - Configure headers for caching static assets
3. Create src/app/sitemap.ts — dynamic sitemap generation
4. Create src/app/robots.ts — robots.txt generation
5. Add error handling:
   - src/app/error.tsx — global error boundary
   - src/app/not-found.tsx — custom 404 page
6. Add monitoring:
   - @vercel/analytics and @vercel/speed-insights (already installed)
7. Create a pre-deploy checklist:
   - All env vars set in Vercel dashboard
   - Database migrated (npx drizzle-kit push)
   - Clerk webhook URL configured
   - Stripe webhook URL configured (if applicable)
 
Do NOT add Sentry or other paid monitoring — keep it to Vercel built-in
tools for MVP.