Server Actions は『Form と Mutation の現代解』
Next.js App Router の Server Actions は、Form 送信や Mutation を Server-side で型安全に処理する仕組みです。本記事では編集部の視点で、深掘りした使い方を公開情報をもとに整理します。Next.js App Router 実践 もご参考に。
基本構造
(1) "use server"ディレクティブ。(2) async 関数を export。(3) Form の action 属性に渡す。(4) FormData 引数受取。(5) Server 側で実行。
Form との統合
(1) Progressive Enhancement：JS 無効でも動作。(2) useFormStatus：送信状態取得。(3) useFormState：状態返却。(4) revalidatePath/Tag：キャッシュ更新。(5) redirect：完了後遷移。
型安全の確保
(1) Zod でバリデーション。(2) parsed.data：型推論。(3) FormState で型化。(4) conform/safe-actionライブラリ。(5) End-to-end 型安全。Zod-Valibot 実践 もご参考に。
セキュリティ
(1) 認証必須：Server Action 内で確認。(2) CSRF 保護：Next.js が自動。(3) レート制限：手動実装。(4) 入力検証：Zod 等で必須。(5) エラーメッセージ：内部情報非開示。Web セキュリティ実践 もご参考に。
キャッシュ無効化
(1) revalidatePath("/path")：特定パス。(2) revalidateTag("tag")：タグ。(3) キャッシュタグ設定：fetch の next.tags。(4) 段階的更新。(5) ISR との関係を理解。
エラーハンドリング
(1) throw vs return：使い分け。(2) useFormStateでエラー受信。(3) error.tsxでフォールバック。(4) Sentry 統合。(5) i18n 対応。Sentry 深掘り もご参考に。
失敗しがちなパターン
(1) 認証チェック忘れ。(2) 機密 SQL 直書き。(3) 大量データ送信：bandwidth。(4) キャッシュ無効化忘れ。(5) エラー詳細露出。対策は、(1)認証ミドル統一、(2)Prisma/Drizzle、(3)制限+chunked、(4)revalidate 必須、(5)汎用エラー、です。