HomeCasa Prompts

Next.js App Router feature with Server Actions

Build a complete Next.js App Router feature with Server Actions, Zod validation, loading and error states, and tests. Designed for ChatGPT, Claude and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.

Advanced · Code · Pending editorial review

Designed for:

Prompt

Act as a senior frontend engineer specializing in the Next.js App Router, React Server Components and strict TypeScript.

I need to implement the "{{feature}}" feature in a Next.js {{next_version}} application.
Data layer: {{data_layer}}.
Authentication: {{auth}}.
Business rules and form fields: {{rules}}.

Deliver, in this order:
1. The file tree inside `app/` and `lib/` (routes, `page.tsx`, `loading.tsx`, `error.tsx`, client and server components), explaining what is a Server Component and what is a Client Component and why.
2. A Zod validation schema shared by client and server, with user-friendly error messages.
3. The complete Server Action (`'use server'`): session and permission checks, validation, database write, `revalidatePath` or `revalidateTag`, and a typed `{ ok, errors, message }` response object.
4. The form using `useActionState` and `useFormStatus` (on Next.js 14 with React 18, use `useFormState` from `react-dom` instead of `useActionState`): per-field errors, a disabled button while submitting, and focus moved to the first invalid field.
5. Error handling: expected vs. unexpected errors, what gets logged and what the user sees.
6. Tests: unit tests for the schema and the action (with the data layer mocked) and one Playwright end-to-end test for the happy path.
7. A security checklist: CSRF, server-side authorization, payload size limits and sensitive data that must never reach the client.

Constraints:
- Strict TypeScript, no `any`.
- Do not invent table names or environment variables: use [FILL IN] if something is missing.
- If you lack information needed for an important decision, ask me before writing code.

How to use it

  1. Describe the feature and business rules in as much detail as you can.
  2. State your Next.js version and how you store data (Prisma, Drizzle, Supabase…).
  3. Paste the prompt into your assistant and copy the files into your project one by one.
  4. Run the tests and replace every [FILL IN] placeholder before deploying.

Usage example

Feature: create and edit meeting-room bookings · Next.js 15 · Data layer: PostgreSQL with Prisma · Auth: Auth.js with admin and employee roles.

Sample output

3. Server Action app/bookings/actions.ts

The Zod schema lives in lib/validation/booking.ts (a 'use server' file may only export async functions). The Prisma model name booking is an assumption: [FILL IN] if yours differs.

'use server';

import { revalidatePath } from 'next/cache';
import { auth } from '@/auth';
import { prisma } from '@/lib/prisma';
import { bookingSchema } from '@/lib/validation/booking';

export type ActionState = {
  ok: boolean;
  errors?: Partial<Record<'roomId' | 'start' | 'end', string[]>>;
  message?: string;
};

export async function createBooking(_prev: ActionState, formData: FormData): Promise<ActionState> {
  const session = await auth();
  if (!session?.user?.id) return { ok: false, message: 'Please sign in to book a room.' };

  const parsed = bookingSchema.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };

  const { roomId, start, end } = parsed.data;
  const overlap = await prisma.booking.findFirst({
    where: { roomId, start: { lt: end }, end: { gt: start } },
  });
  if (overlap) return { ok: false, errors: { start: ['This room is already booked at that time.'] } };

  await prisma.booking.create({ data: { roomId, start, end, userId: session.user.id } });
  revalidatePath('/bookings');
  return { ok: true, message: 'Booking created.' };
}

Session and overlap checks always run on the server; client-side validation is only for fast feedback. In production, back the overlap check with a PostgreSQL exclusion constraint…

Key facts

Category
Programming & development · Next.js
Output type
Code
Level
Advanced
Designed for
ChatGPT, Claude and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Feature, Next.js version, Data layer, Authentication and Rules and fields
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Why use Server Actions instead of an API route?

For forms and internal mutations within your own app, Server Actions mean less code, integrate with cache revalidation and work without client-side JavaScript. If third parties consume the operation, an API route is still the better choice.

Is client-side validation enough?

No. Client-side validation improves the experience, but the Server Action must validate again and check permissions, because anyone can call it directly.

What is this prompt for?

Build a complete Next.js App Router feature with Server Actions, Zod validation, loading and error states, and tests.

Which AI tools does it work with?

It is designed for ChatGPT, Claude and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Feature, Next.js version, Data layer, Authentication and Rules and fields). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is advanced: it is meant for people with experience in the topic who can evaluate and adjust the result.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts