Skip to content
My Docs

Next.jsのServer Actionの正体は何なのか

This content is a draft and will not be included in production builds.

Next.jsのServer Actionは次のように実装する。

function updateUserAction() {
  ...
}


// URL = /users/1/edit
<form action={updateUserAction}>
  <input type="text" name="name">
</form>

これをビルドすると、クライアント側のイメージとしては次のようになる。

// URL = /users/1/edit
<form method="POST" action="/users/1/edit">
  <input type="hidden" name="$ACTION_ID_xxx">
  <input type="text" name="name">
</form>

サーバ側はこのように。

switch(actionId) {
case '$ACTION_ID_xxx':
  updateUserAction(form);
}