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.
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, データ更新.
含まれるファイル(1)
- SKILL.md2.5 KB
SKILL.md(原文)
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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('/')で広く無効化し、無関係なページまで再生成する。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
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.
Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.
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.
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.
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.