Next.js Features - 中級

ServerActions

フォーム送信とサーバー処理を統合する新しいパターン

Server Actions とは
サーバーで実行される非同期関数を直接呼び出せる機能

  • API ルート不要

    従来の /api エンドポイントを作成する必要がない

  • 型安全

    TypeScript の型がクライアントとサーバー間で共有される

  • Progressive Enhancement

    JavaScript が無効でもフォームが動作する

// actions.ts "use server"; export async function submitForm(formData: FormData) { const name = formData.get("name"); // サーバーサイドで処理 return { success: true }; }
お問い合わせフォーム
基本的な Server Action の使用例
TODO リスト
useActionState を使った状態管理
  • TODOがありません

TODO数: 0

実装のポイント
Server Actions を使う際の注意点

使用すべきケース

  • • フォーム送信
  • • データベース操作
  • • 外部 API 呼び出し
  • • ファイルアップロード

注意点

  • • 入力値のバリデーションは必須
  • • エラーハンドリングを忘れずに
  • • 機密情報の扱いに注意
  • • revalidatePath で再検証
Next Steps
次のステップ

Suspense とローディング UI を学んでみましょう。

カタログを見る