인터페이스는 현지화되어 있으며, Skill 소개와 설명 문서는 선택한 언어로 AI가 자동 번역합니다. 코드·명령어·경로·전문 용어는 원문을 유지하며 원작자 문서가 우선합니다.
Skills 둘러보기
생산성 및 협업 · SKILL.md

nextjs-server-actions

nextjs-server-actions

Implement secure Next.js Server Actions for mutations, forms, and optimistic UI. Use when building actions, form flows, auth checks, or revalidation after writes.

Independent GitHub snapshot · Automated classification · Original documentation governs

Skill 문서

GitHub

name: nextjs-server-actions description: Implement secure Next.js Server Actions for mutations, forms, and optimistic UI. Use when building actions, form flows, auth checks, or revalidation after writes. metadata: triggers: files: - 'app//actions.ts' - 'src/app//actions.ts' - 'app//*.tsx' - 'src/app//*.tsx' keywords: - use server - Server Action - revalidatePath - useFormStatus

Server Actions

Priority: P1 (HIGH)

[!WARNING] If project uses pages/ directory instead of App Router, ignore this skill entirely.

Build action files as secure server entrypoints, not as thin wrappers around unsafe form data.

Recipe

  1. Define action in actions.ts with 'use server'.
  2. Parse input with a schema before touching storage or services, for example z.object({ ... }).safeParse(...) or formData.get('title') -> validated shape.
  3. Authorize inside the action; middleware alone is not enough.
  4. Delegate to DAL/service layer; keep storage details out of route UI files.
  5. Revalidate exact tags/paths owned by the mutation.
  6. Expose pending and optimistic state with useFormStatus, useActionState, useTransition, or useOptimistic as needed. Typical form wiring is <form action={createPost}> or <form action={action}>, with useFormStatus() and disabled={pending} inside the submit child.

Verify

  • Action validates FormData or arguments before processing.
  • Action performs authn/authz inside the server function.
  • Mutations call DAL/service code, not raw storage from components.
  • Success path revalidates tags or paths.
  • Redirects or thrown errors are handled in the expected control flow.

Anti-Patterns

  • No unvalidated Server Action inputs: Always validate with Zod before processing.
  • No skipped auth checks: Verify session/user inside every action, not middleware.
  • No actions defined inside components: Define in actions.ts to avoid closure bugs.
  • No redirect() in try/catch: redirect() throws; catching it suppresses redirect.

References

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

  • action={action}
  • action={createPost}
저장한 Skills