Next.js App Router taste — ChatGPT prompt: what it does
An opinionated set of Next.js App Router conventions enforcing Server Components by default, Server Actions validated with Zod, and feature-based folder organization.
Open on GitHubWhat Next.js App Router taste does
The prompt supplies the model with strict App Router architecture guidelines paired with confidence scores. Server Components act as the default baseline, while "use client" stays confined to interactive leaf nodes. Data fetching happens directly on the server. The setup bypasses intermediary internal API routes for reads, routing all mutations through Server Actions verified by Zod schemas.
Code organization groups loaders, components, and tests by feature instead of file types. For persistence, the instructions specify Prisma or Drizzle with clients contained inside lib/db.ts. Cache invalidation relies on fetch tags and revalidateTag rather than ad-hoc in-memory storage. Large projects must omit barrel files, preventing slow build times.
Testing splits responsibilities: Playwright verifies critical user flows, while Vitest handles isolated components. Middleware logic remains restricted to authentication redirects and locale resolution, keeping heavy compute out of the request pipeline.
What it helps with
- Restrict
"use client"directives strictly to interactive leaf components - Validate Server Action mutation payloads with Zod schemas
- Colocate loaders, tests, and UI components by feature
- Prevent slow build times by eliminating barrel files in large apps
- Manage cache invalidation using fetch tags and
revalidateTag
Example prompts for the agent
- Create a user profile form using Next.js Server Actions and Zod validation
- Generate a product route segment with direct server fetching,
loading.tsx, anderror.tsx - Set up a database query module using Drizzle through
lib/db.tswith fetch tags
How to install Next.js App Router taste
How to use
Paste the text at the start of a chat or into project instructions
Manually: put the files in place
.claude/commands/prompts.csv.mdQuestions about Next.js App Router taste
How to install Next.js App Router taste in ChatGPT or Claude.ai?
Paste the prompt instructions directly into your custom instructions or system prompt. In Claude Code, place the file at .claude/commands/prompts.csv.md.
What does Next.js App Router taste do?
It forces the AI model to write Next.js code following Server Component best practices, feature colocation, next/image usage, and clean data caching.
Which database and testing libraries does this prompt require?
The prompt mandates either Prisma or Drizzle configured in lib/db.ts. Testing relies on Vitest for component units and Playwright for full end-to-end flows.
Source text
prompts.csv · CC0-1.0
# Next.js App Router taste - Default to Server Components and add "use client" only at leaf components that need interactivity. Confidence: 0.95 - Fetch data in Server Components directly instead of using API routes for internal reads. Confidence: 0.90 - Use Server Actions for mutations and validate input with zod. Confidence: 0.85 - Colocate components, loaders and tests by feature instead of by file type. Confidence: 0.80 - Use Tailwind CSS with a small set of design tokens in CSS variables. Confidence: 0.85 - Use next/image and next/font for all images and fonts. Confidence: 0.90 - Add loading.tsx and error.tsx to every route segment that fetches data. Confidence: 0.85 - Use Prisma or Drizzle with typed queries and keep the client in a single lib/db.ts. Confidence: 0.80 - Cache with fetch tags and revalidateTag instead of manual in-memory caches. Confidence: 0.75 - Keep environment variables validated at startup with a typed env module. Confidence: 0.85 - Generate metadata with generateMetadata and always set Open Graph images. Confidence: 0.85 - Avoid barrel files in large apps because they hurt build times. Confidence: 0.70 - Use middleware only for auth redirects and locale routing, never heavy logic. Confidence: 0.80 - Test critical flows with Playwright and components with vitest. Confidence: 0.80 - Deploy on Vercel with preview deployments for every pull request. Confidence: 0.75
© f · CC0-1.0 · f/prompts.chat
