Next.js App Router Prompt Pack

I'm building with Next.js 15+ App Router, TypeScript strict mode, and Tailwind CSS.
 
Key constraints:
- Server Components by default — only add 'use client' when truly needed (event handlers, hooks, browser APIs)
- Data fetching happens in Server Components using async/await directly
- Mutations use Server Actions (not API routes unless I ask for one)
- Drizzle ORM for all database queries
- Clerk for auth — auth() in server, useAuth() in client components
 
Do not use:
- getServerSideProps or getStaticProps (Pages Router)

I need a Server Component that fetches [describe data] for [describe page].
 
Requirements:
- Async Server Component — fetch data directly with await, no useEffect
- Use Drizzle ORM with the db client imported from @/lib/db
- Handle the loading state with a Suspense boundary in the parent layout
- Throw errors — let the error.tsx boundary handle them
- TypeScript — infer types from Drizzle schema, don't write manual interfaces
 
The component renders: [describe what you want to display]

I need a Server Action for [describe mutation — e.g. "creating a new project"].
 
Requirements:
- Defined with 'use server' at the top of the function or file
- Validates input with Zod before touching the database
- Uses Drizzle ORM for the database write
- Returns { success: true, data: ... } or { success: false, error: string }
- Calls revalidatePath('/[relevant route]') after a successful write
- Gets the current user via auth() from @clerk/nextjs/server
 
The action should: [describe exactly what it creates/updates/deletes]
Data shape: [describe the input fields]

I need a layout.tsx that protects all routes under [describe path — e.g. /dashboard].
 
Requirements:
- Server Component layout
- Check auth with auth() from @clerk/nextjs/server
- Redirect to /sign-in if no userId (use redirect() from next/navigation)
- Fetch any shared data needed by all child pages (e.g. current user profile from DB)
- Pass shared data to children via React context OR render it directly in the layout
- Include [describe what the layout UI looks like — sidebar, header, etc.]

I need a page with multiple independent data sections that should load in parallel.
 
Page: [describe the page — e.g. /dashboard]
Sections:
1. [Section name] — fetches [describe data]
2. [Section name] — fetches [describe data]
3. [Section name] — fetches [describe data]
 
Requirements:
- Each section is a separate async Server Component
- Wrapped in individual <Suspense> boundaries with skeleton loaders
- Data fetches run in parallel (don't await sequentially — use Promise.all or separate components)
- Each skeleton matches the approximate shape of its loaded content

I need a client component that [describe interaction — e.g. "toggles a task as complete"].
 
Requirements:
- 'use client' component
- Calls a Server Action for the database write
- Uses useOptimistic() to update UI immediately before the server confirms
- Reverts optimistic state on error and shows an error message
- No separate API route — the Server Action handles the DB write
 
Current state shape: [describe what you're toggling/updating]
Server Action to call: [name it or describe what it should do]

I need a dynamic route at [describe path — e.g. /blog/[slug]] with static generation.
 
Requirements:
- generateStaticParams() fetches all valid slugs from the database at build time
- The page component is an async Server Component that fetches the specific item
- Use notFound() from next/navigation if the slug doesn't exist in the database
- Add generateMetadata() for dynamic OG title and description
- Set revalidate to [number] seconds for ISR — content doesn't change often
 
The data being displayed: [describe what the page shows]

I need to correctly invalidate cached data after [describe mutation].
 
My current setup:
- [Describe what pages or components show the affected data]
- [Describe where the mutation happens — Server Action, API route, webhook]
 
Requirements:
- Use revalidatePath() for page-level invalidation
- Use revalidateTag() if the data is fetched with fetch() and tagged
- Don't over-invalidate — only revalidate the pages that actually show the changed data
- If using Drizzle (not fetch()), explain which approach applies
 
Mutation: [describe what changes]
Affected routes: [list the routes that display this data]