Scaffold Next.js Project

# Scaffold Next.js Project ## When to use Use this skill when starting a new web project. This is James's standard stack: Next.js + Prisma 7 + Neon + Tailwind + Vercel + Cloudflare DNS. ## Prerequisites - Node.js 22+, npm/npx available - `vercel` CLI authenticated - `neonctl` CLI authenticated - `gh` CLI authenticated - Access to vault proxy for Cloudflare DNS ## Instructions ### Step 1: Create the Next.js project ```bash cd ~/dev/projects npx create-next-app@latest my-project --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm cd my-project ``` ### Step 2: Initialize git and GitHub repo ```bash git init gh repo create worklocalinc/my-project --private --source=. --remote=origin ``` ### Step 3: Set up Prisma 7 with Neon ```bash npm install prisma @prisma/client @prisma/adapter-pg pg npm install -D @types/pg dotenv npx prisma init ``` Create `prisma.config.ts`: ```typescript import "dotenv/config"; import { defineConfig } from "prisma/config"; export default defineConfig({ schema: "prisma/schema.prisma", datasource: { url: process.env["DIRECT_URL"] || process.env["DATABASE_URL"], }, }); ``` Update `prisma/schema.prisma`: ```prisma generator client { provider = "prisma-client" output = "../src/generated/prisma" } datasource db { provider = "postgresql" } ``` Create the Neon database: ```bash neonctl projects create --name my-project --region-id aws-us-east-1 --org-id org-patient-sunset-05785270 ``` Add connection strings to `.env`: ``` DATABASE_URL="postgresql://...pooler URL...?sslmode=require" DIRECT_URL="postgresql://...direct URL...?sslmode=require" ``` Create `src/lib/db.ts`: ```typescript import { PrismaPg } from "@prisma/adapter-pg"; import { PrismaClient } from "@/generated/prisma/client"; import { Pool } from "pg"; const pool = new Pool({ connectionString: process.env.DATABASE_URL }); const adapter = new PrismaPg(pool); const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }; export const prisma = globalForPrisma.prisma || new PrismaClient({ adapter }); if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma; ``` ### Step 4: Apply James's Tailwind dark theme In `src/app/globals.css`, establish the dark theme base: ```css @import "tailwindcss"; body { @apply bg-gray-950 text-gray-100 antialiased; } ``` Standard color palette: - Background: `bg-gray-950` (page), `bg-gray-900` (cards), `bg-gray-800` (inputs) - Accent: `cyan-400` / `cyan-500` (primary), `emerald-400` (success), `red-400` (error) - Borders: `border-gray-800` (default), `border-cyan-500/30` (active) - Text: `text-gray-100` (primary), `text-gray-400` (secondary), `text-gray-600` (muted) ### Step 5: Deploy to Vercel ```bash vercel --yes --prod vercel env add DATABASE_URL production vercel env add DIRECT_URL production ``` ### Step 6: Set up custom domain ```bash vercel domains add myapp.skynet.ceo ``` Then create DNS via vault proxy: ```bash source .env curl -s -X POST \ -H "Authorization: Bearer $BOTS_VAULT_ADMIN_TOKEN" \ -H "Content-Type: application/json" \ "http://192.168.86.27:8020/v1/proxy/cloudflare/zones/a2ecd4cf8341dc3e8e105dc06c14d2fc/dns_records" \ -d '{"type":"CNAME","name":"myapp.skynet.ceo","content":"cname.vercel-dns.com","proxied":true,"ttl":1}' ``` ### Step 7: Create CLAUDE.md Every project needs a CLAUDE.md with: - Project name and purpose - Tech stack - Key commands (dev, build, deploy) - Database info - API endpoints (if any) - Deployment URL ### Step 8: Initial commit and push ```bash echo "node_modules/\n.env\n.env.local\nsrc/generated/" > .gitignore npx prisma generate git add -A git commit -m "Initial scaffold: Next.js + Prisma 7 + Neon + Tailwind" git push -u origin main ``` ## Common patterns **Add a seed script to package.json:** ```json { "prisma": { "seed": "npx tsx prisma/seed.ts" } } ``` **Standard API route pattern:** ```typescript // src/app/api/items/route.ts import { NextRequest, NextResponse } from "next/server"; import { prisma } from "@/lib/db"; export async function GET(request: NextRequest) { const items = await prisma.item.findMany(); return NextResponse.json(items); } ``` ## Troubleshooting - **Prisma generate fails**: Run `npx prisma generate` after any schema change. Make sure `src/generated/` is in `.gitignore`. - **Vercel build fails**: Ensure `DATABASE_URL` is set in Vercel env vars. Prisma needs it at build time. - **DNS not resolving**: Cloudflare DNS propagation takes 1-5 minutes. Check with `dig myapp.skynet.ceo`. ## References - Next.js docs: https://nextjs.org/docs - Prisma 7 docs: https://www.prisma.io/docs - Vercel CLI: https://vercel.com/docs/cli