Skip to content
cccskills
FreePublished on GitHub

nextjs-server-actions

Use this skill when implementing form submissions, data mutations, or any 'use server' function in Next.js 16. Trigger words: フォーム送信, mutation, 更新処理, 保存, Server Action, use server, useActionState, revalidatePath, データ更新.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md2.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Next.js Server Actions

いつ使うか

  • フォーム送信やデータの作成・更新・削除(mutation)を実装するとき。
  • クライアントから直接サーバー関数を呼びたいとき(API ルートを増やさずに)。

やること

  • mutation 関数の先頭に 'use server' を付ける。
  • 受け取った FormData / 引数を必ず Zod で検証してから処理する。
  • 認可チェック(誰がこの操作をしてよいか)を関数内で行う。
  • 成功後に revalidatePath / revalidateTag でキャッシュを無効化する。
  • クライアント側は useActionState でローディング・エラーを扱う。

守るルール

  • ✅ 'use server' + 入力 Zod 検証 + 認可チェックを必ずセットにする。
  • ✅ 返り値は判別可能な型({ ok: true } | { ok: false, error })にする。
  • ✅ 成功時は適切な粒度で再検証(全体ではなく対象パス/タグ)。
  • ❌ 検証前の生データを DB クエリへ渡さない。
  • ❌ Server Action 内でシークレットをクライアントに返さない。

典型例(コード片)

// app/users/actions.ts
'use server';
import { z } from 'zod';
import { revalidatePath } from 'next/cache';
import { requireUser } from '@/lib/auth';
import { UserModel } from '@/models/user';

const UpdateName = z.object({ id: z.string().length(24), name: z.string().min(1).max(80) });

export async function updateName(_: unknown, formData: FormData) {
  const session = await requireUser();
  const parsed = UpdateName.safeParse(Object.fromEntries(formData));
  if (!parsed.success) return { ok: false as const, error: '入力が不正です' };

  const { id, name } = parsed.data;
  if (session.userId !== id) return { ok: false as const, error: '権限がありません' };

  await UserModel.updateOne({ _id: id }, { $set: { name } });
  revalidatePath(`/users/${id}`);
  return { ok: true as const };
}

アンチパターン

  • Object.fromEntries(formData) をそのまま DB へ(検証なし)。
  • 認可チェックを忘れて他人のデータを更新できてしまう。
  • revalidatePath('/') で広く無効化し、無関係なページまで再生成する。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.

The English summary is being prepared. Showing the original description.

Akira-Papa/claude-code-nextjs-mongo-template-16Updated May 24, 2026

See all skills by Akira-Papa

Report a problem with this skill