Next.js Server Action Pattern

VerifiedSafe

Creates/modifies Next.js Server Actions with the mandatory pattern: 'use server', Zod validation, Supabase client, auth check, revalidatePath, and logging. Enforces Server Actions for CRUD.

Sby Skills Guide Bot
DevelopmentIntermediate
8/6/2026
Claude CodeCursor
#nextjs#server-actions#supabase#zod#crud

Recommended for

Automated summary

Creates or modifies Next.js Server Actions for the JKKN site following the project's mandatory pattern: 'use server', Zod validation, Supabase server client, auth check, revalidatePath, and activity logging through logActivity.

Strengths

  • Enforces non-negotiable project rules (no API routes for CRUD, server-side validation always, auth check before mutating)
  • Provides a complete numbered workflow from file placement under app/actions/ to the chosen return type
  • Clearly separates the regular Supabase client from the service-role admin client and warns never to expose it to the browser
  • Interoperates with the companion admin-crud-pages and database-documentation-workflow skills

Limitations

  • Tightly coupled to a specific codebase (JKKN Institution, Supabase, activity table) and not directly portable
  • Assumes logActivity, checkPermission, and the Supabase clients already exist in the repo
  • The SKILL.md text is truncated at the end, so the database migration hand-off is only partially specified
When to use it

Use it whenever adding or changing a data-writing function (create/update/delete) under app/actions/ in this Next.js project.

When not to use it

Do not use it for read-only data fetching in a Server Component, or for building the admin page and table that call the action.

Security analysis

Safe
Quality score90/100

The skill is a project-specific coding pattern document for Next.js Server Actions. It does not execute commands, install packages, exfiltrate secrets, or instruct destructive behavior. It mentions a service-role Supabase client but explicitly restricts it to legitimate admin-only use and warns against client exposure.

No concerns found

How this analysis is made

Examples

Create a new entity mutation
Add a server action to create a new placement record for the JKKN site, with Zod validation and activity logging.
Wire up a form submit
Wire up the department edit form so it submits through a server action that updates Supabase and revalidates the admin list and public page.
Delete with permission check
Create the delete mutation for testimonials in app/actions/, including an auth check, a checkPermission guard, logActivity, and revalidatePath.

name: server-action-pattern description: Create or modify a Next.js Server Action for the JKKN institution website following the project's mandatory pattern. This skill should be used when the user asks to "add a server action", "create a mutation", "wire up a form submit", "add create/update/delete logic", "save/update/delete an entity", or any data-writing function under app/actions/. Enforces the project rule that CRUD uses Server Actions (never API routes): 'use server', Zod validation, the Supabase server client, an auth check, revalidatePath, and activity logging via logActivity. Pairs with admin-crud-pages (which consumes these actions) and database-documentation-workflow (when the action needs a new table).

Server Action Pattern (JKKN Institution Website)

Purpose

Write data-mutating logic the single way this codebase does it. Every file in app/actions/ is a 'use server' module that validates input with Zod, talks to Supabase through the server client, checks auth, revalidates affected paths, and logs the activity. Following this exactly keeps mutations secure (server-side validation, RLS-protected) and consistent with ~46 existing action files.

Hard rules (from CLAUDE.md — non-negotiable)

  1. No API routes for CRUD. All create/update/delete go through Server Actions.
  2. Server-side validation always. Never trust client input — parse with Zod inside the action.
  3. Auth check before mutating. supabase.auth.getUser(); bail if no user.
  4. Activity logging for create/update/delete via logActivity (or an ActivityHelpers.* helper).
  5. Revalidate every path whose data changed with revalidatePath(...).

When to use

  • "Add a server action to save/update/delete X"
  • "Wire up this form to submit" / "handle form submission"
  • "Create the mutation for <entity>"
  • Any new function under app/actions/ (or app/actions/cms/ for CMS-scoped actions)

Do not use for:

  • Pure read-only Server Components fetching data inline (no mutation) — though shared read helpers (getX) commonly live in the same action file.
  • Admin page/table scaffolding → use admin-crud-pages (it calls these actions).

Workflow

Start from templates/server-action.template.ts. Steps:

  1. Place the file. app/actions/<entity>.ts, or app/actions/cms/<entity>.ts for CMS features. Group reads (getX) and writes (createX, updateX, deleteX) for one entity in one file.
  2. 'use server' as the first line.
  3. Import the server client from @/lib/supabase/server:
    • createServerSupabaseClient() — default; respects the signed-in user + RLS.
    • createAdminSupabaseClient() — service role, bypasses RLS. Use ONLY for admin operations that legitimately must (e.g. creating users). Never expose to the client.
  4. Define a Zod schema per mutation. Enforce domain rules (e.g. emails end with @jkkn.ac.in via .refine(...)).
  5. Auth check: const { data: { user } } = await supabase.auth.getUser(); return Unauthorized if missing.
  6. (Optional) permission check: checkPermission(user.id, 'module:resource:action') from ./permissions for protected operations.
  7. Validate formData/args with schema.parse(...) inside a try/catch (catch z.ZodError).
  8. Mutate via Supabase; handle error explicitly.
  9. Log activity with logActivity({ userId, action, module, resourceType, resourceId, metadata }).
  10. revalidatePath(...) for each affected route (e.g. the admin list AND the public page).
  11. Return a typed result. Two shapes exist in the codebase — pick one and be consistent within the file: simple { success: boolean; error?: string; data?: T } (see app/actions/videos.ts) or the richer FormState used with useActionState/useFormState (see app/actions/users.ts).

If the action requires a new table/column/policy, follow database-documentation-workflow FIRST (document the SQL, then apply the migration) before writing the action.

Verification

  • npm run build compiles.
  • Unauthenticated call returns the unauthorized result (does not mutate).
  • Invalid input returns the Zod message (does not mutate).
  • After a successful mutation the list/public page reflects the change (revalidation works).
  • A row appears in user_activity_logs.

Red-flag checklist

  • [ ] First line is 'use server'?
  • [ ] Did I avoid creating an API route for this CRUD?
  • [ ] Zod schema validates every input server-side?
  • [ ] Auth checked before the mutation?
  • [ ] logActivity called for create/update/delete?
  • [ ] revalidatePath for every affected route?
  • [ ] Consistent return shape within the file?
  • [ ] If a new table was needed, did I document+migrate via database-documentation-workflow first?

Bundled resources

  • templates/server-action.template.ts — full read+create+update+delete action module.
  • references/conventions.md — client choice, return shapes, logActivity enums, permission format.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/next-js-server-action-pattern-msh3us82/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/next-js-server-action-pattern-msh3us82' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/next-js-server-action-pattern-msh3us82/download' --output '.skill-downloads/next-js-server-action-pattern-msh3us82/SKILL.md.part' && mv '.skill-downloads/next-js-server-action-pattern-msh3us82/SKILL.md.part' '.skill-downloads/next-js-server-action-pattern-msh3us82/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

This file does not provide a usable name/description header for this native procedure. It remains available to download and inspect; use the manual method below.

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/next-js-server-action-pattern-msh3us82/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills