You know the drill: you open a new Next.js project, and suddenly you're writing the same boilerplate for the hundredth time — API routes, Zod schemas, Prisma models, auth middleware. It's not hard, it's just slow. And slow kills momentum.
I've spent the last year using AI assistants daily for TypeScript work, and I've distilled the prompts that actually save hours. Not the generic "write me a React component" stuff — the ones that understand Next.js App Router, server actions, tRPC, and Prisma. Each prompt below is battle-tested, with a real example and code you can copy.
1. Scaffold a Next.js App Router page with data fetching and loading states
Why it works: The AI knows the App Router conventions (async components, loading.tsx, error.tsx) and generates the full file tree, not just a snippet.
Prompt:
Generate a Next.js 15 App Router page at /app/products/page.tsx that fetches products from a Prisma client. Include:
- async server component with try/catch
- loading.tsx with skeleton
- error.tsx as a client component
- TypeScript types from Prisma
Example output (trimmed):
// app/products/page.tsx
export default async function ProductsPage() {
const products = await prisma.product.findMany();
return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}
2. Generate Zod schemas from Prisma models
Why it works: Keeps validation in sync with the database without manual typing.
Prompt:
Given this Prisma model:
model User { id String @id @default(cuid()) email String @unique name String? }
Write a Zod schema for create and update operations, infer TypeScript types, and export them.
Example:
import { z } from 'zod';
export const createUserSchema = z.object({
email: z.string().email(),
name: z.string().optional(),
});
export type CreateUserInput = z.infer<typeof createUserSchema>;
3. Build a tRPC router with protected procedures
Why it works: The AI handles the boilerplate of context, middleware, and input validation in one go.
Prompt:
Create a tRPC router for a blog: list, byId, create, update, delete. Use Zod for input, protect create/update/delete with an auth middleware that checks session.user.role === 'admin'. Export the router type.
Example:
export const postRouter = router({
list: publicProcedure.query(() => prisma.post.findMany()),
create: protectedProcedure
.input(z.object({ title: z.string(), content: z.string() }))
.mutation(({ input }) => prisma.post.create({ data: input })),
});
4. Convert REST endpoints to server actions
Why it works: Migrating from API routes to server actions is tedious; the AI does it file by file.
Prompt:
Convert this API route handler to a Next.js server action. Keep the same validation and error handling. Use 'use server' directive and revalidatePath.
[insert your route.ts code]
Example:
'use server';
export async function createTodo(formData: FormData) {
const title = formData.get('title') as string;
await prisma.todo.create({ data: { title } });
revalidatePath('/todos');
}
5. Write a Prisma seed script with realistic data
Why it works: Saves you from writing 50 lines of fake data manually.
Prompt:
Write a Prisma seed script (prisma/seed.ts) that creates 10 users, each with 3 posts. Use faker-js for names and emails. Make it idempotent with upsert.
Example:
import { faker } from '@faker-js/faker';
for (let i = 0; i < 10; i++) {
await prisma.user.upsert({
where: { email: faker.internet.email() },
update: {},
create: { email: faker.internet.email(), name: faker.person.fullName() },
});
}
6. Generate typed API client from OpenAPI spec
Why it works: Eliminates manual type definitions for external APIs.
Prompt:
Given this OpenAPI JSON, generate a TypeScript client using fetch with generics for response types. Include error handling for non-2xx responses.
[insert spec]
Example:
export async function apiGet<T>(path: string): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`);
if (!res.ok) throw new Error(await res.text());
return res.json() as Promise<T>;
}
7. Set up authentication with NextAuth and Prisma adapter
Why it works: Auth setup is error-prone; the AI knows the exact config shape.
Prompt:
Generate NextAuth configuration for credentials provider using Prisma adapter. Include session callback to add user.role to the session. Use TypeScript module augmentation for Session type.
Example:
// types/next-auth.d.ts
declare module 'next-auth' {
interface Session { user: { role: string } & DefaultSession['user'] }
}
8. Write unit tests with Vitest and React Testing Library
Why it works: Tests are the first thing we skip; AI makes them fast to write.
Prompt:
Write Vitest tests for this React component. Cover: renders loading state, renders data, handles error. Use @testing-library/react and mock the fetch call.
[insert component]
Example:
it('shows loading', () => {
render(<ProductsPage />);
expect(screen.getByText(/loading/i)).toBeInTheDocument();
});
9. Optimize a slow Prisma query
Why it works: The AI suggests includes, selects, and indexes you might forget.
Prompt:
This Prisma query is slow: [query]. Suggest optimizations: select only needed fields, add indexes, avoid N+1. Show the improved query and the index definitions.
Example:
// Before: include all relations
// After:
prisma.post.findMany({
select: { id: true, title: true, author: { select: { name: true } } },
});
10. Generate a Dockerfile for a Next.js standalone build
Why it works: Multi-stage builds are tricky; the AI gets the caching right.
Prompt:
Write a multi-stage Dockerfile for Next.js 15 with standalone output. Use node:20-alpine, copy only necessary files, run as non-root user.
Example:
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next/standalone ./
USER node
CMD ["node", "server.js"]
11. Create a typed form with React Hook Form and Zod
Why it works: The AI wires the resolver and types automatically.
Prompt:
Build a form component for creating a product with fields name, price, description. Use react-hook-form with zodResolver. Show inline validation errors. Export the component and the schema.
Example:
const form = useForm<z.infer<typeof productSchema>>({
resolver: zodResolver(productSchema),
});
12. Write a custom React hook for data fetching with SWR
Why it works: Encapsulates loading, error, and revalidation logic in one reusable hook.
Prompt:
Create a useProducts hook using SWR that fetches /api/products, returns { products, isLoading, error, mutate }. Type the response with the Product interface.
Example:
export function useProducts() {
const { data, error, isLoading, mutate } = useSWR<Product[]>('/api/products', fetcher);
return { products: data, isLoading, error, mutate };
}
13. Generate a GitHub Actions CI workflow for TypeScript
Why it works: The AI includes lint, type-check, test, and build steps in the correct order.
Prompt:
Create a GitHub Actions workflow that runs on push to main: install deps with npm ci, run eslint, tsc --noEmit, vitest, and build. Cache node_modules.
Example:
- uses: actions/setup-node@v4
with: { node-version: 20, cache: 'npm' }
- run: npm ci
- run: npm run lint && npx tsc --noEmit && npm test
14. Refactor a component to use React Server Components
Why it works: Moving client logic to server is a common perf win; the AI knows the boundaries.
Prompt:
Refactor this client component to a server component where possible. Move data fetching to the server, keep only interactive parts as client components. Show the split.
[insert component]
Example:
// page.tsx (server)
const data = await getData();
return <ClientTable data={data} />;
15. Generate a typed environment configuration with Zod
Why it works: Catches missing env vars at build time, not runtime.
Prompt:
Create a config module that validates process.env with Zod: DATABASE_URL (url), NEXTAUTH_SECRET (min 32 chars), NEXT_PUBLIC_API_URL (url). Export a typed env object.
Example:
const envSchema = z.object({
DATABASE_URL: z.string().url(),
NEXTAUTH_SECRET: z.string().min(32),
});
export const env = envSchema.parse(process.env);
These prompts won't write your app for you, but they remove the friction that eats your day. Start with the ones that match your stack — Next.js, Prisma, tRPC — and adapt them. The real speedup comes when you stop writing boilerplate and start designing systems. Got a prompt that saved you hours? Share it in the comments.
Further reading:
- Next.js App Router docs: https://nextjs.org/docs/app
- Prisma schema reference: https://www.prisma.io/docs/orm/prisma-schema
- tRPC docs: https://trpc.io/docs
- Zod docs: https://zod.dev
Comments