ReactのServer Functionsでフォームの送信を受け取る方法

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { readCats, writeCats } from '../lib/cats';

export async function addCat(formData: FormData) {
  const name = formData.get('name');
  console.log('[addCat]', [...formData.keys()], name);
  if (typeof name !== 'string' || name.trim() === '') return;

  const cats = await readCats();
  await writeCats([...cats, name.trim()]);
  revalidatePath('/');
}

// app/page.tsx
import { addCat } from './actions';
import { readCats } from '../lib/cats';

export default async function Page() {
  const cats = await readCats();
  return (
    <main>
      <ul>
        {cats.map((name, i) => (
          <li key={i}>{name}</li>
        ))}
      </ul>
      <form action={addCat}>
        <input name="name" aria-label="名前" />
        <button>追加</button>
      </form>
    </main>
  );
}

POST の数: 1
method: POST  url: http://localhost:3000/  種類: fetch
next-action ヘッダー: 40d4a2b83b25a6c69b3b7d004d6adc7e4c99bb5c40
content-type: multipart/form-data; boundary=（省略）

----（区切り）
Content-Disposition: form-data; name="_1_$ACTION_ID_40d4a2b83b25a6c69b3b7d004d6adc7e4c99bb5c40"


----（区切り）
Content-Disposition: form-data; name="_1_name"

みけ
----（区切り）
Content-Disposition: form-data; name="0"

["$K1"]
----（区切り）--

[addCat] [ '$ACTION_ID_40d4a2b83b25a6c69b3b7d004d6adc7e4c99bb5c40', 'name' ] みけ

<form action="" enctype="multipart/form-data" method="POST">
<input type="hidden" name="$ACTION_ID_40d4a2b83b25a6c69b3b7d004d6adc7e4c99bb5c40">
<input aria-label="名前" name="name">
<button>追加</button>
</form>

送信から1秒後の li: [ 'たま' ]
再読み込みした後の li: [ 'たま' ]

// app/actions.ts（続き）
export type AddCatState = { error: string | null; name: string };

export async function addCatWithState(
  prevState: AddCatState,
  formData: FormData,
): Promise<AddCatState> {
  const name = formData.get('name');
  console.log('[addCatWithState]', prevState, name);
  if (typeof name !== 'string' || name.trim() === '') {
    return { error: '名前を入れてください', name: '' };
  }
  if (name.length > 10) {
    return { error: '名前は10文字までです', name };
  }

  const cats = await readCats();
  await writeCats([...cats, name.trim()]);
  revalidatePath('/with-state');
  return { error: null, name: '' };
}

// app/with-state/cat-form.tsx
'use client';

import { useActionState } from 'react';
import { addCatWithState } from '../actions';

export function CatForm() {
  const [state, formAction, isPending] = useActionState(addCatWithState, {
    error: null,
    name: '',
  });

  return (
    <form action={formAction}>
      <input name="name" aria-label="名前" defaultValue={state.name} />
      <button disabled={isPending}>追加</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

[addCatWithState] { error: null, name: '' } 
[addCatWithState] { error: '名前を入れてください', name: '' } ながいながいなまえのねこ
[addCatWithState] { error: '名前は10文字までです', name: 'ながいながいなまえのねこ' } しろ

<form action="" enctype="multipart/form-data" method="POST">
<input type="hidden" name="$ACTION_REF_1">
<input type="hidden" name="$ACTION_1:0" value="{&quot;id&quot;:&quot;605bcec8199f68a777859c5a5919ba3f1ec05320ce&quot;,&quot;bound&quot;:&quot;$@1&quot;}">
<input type="hidden" name="$ACTION_1:1" value="[{&quot;error&quot;:null,&quot;name&quot;:&quot;&quot;}]">
<input type="hidden" name="$ACTION_KEY" value="k625ff5bee164c3ceca102f434eb10857">
<input aria-label="名前" name="name" value="">
<button>追加</button>
</form>

# (1) Origin ヘッダーなしで、30文字の名前を送る
HTTP 200
# (2) 別のサイトの Origin を付けて送る
HTTP 500
# 送った後の data/cats.json
["たま","しろ","ねこねこねこねこねこねこねこねこねこねこねこねこねこねこねこ"]

`x-forwarded-host` header with value `localhost:3000` does not match `origin` header
with value `attacker.example` from a forwarded Server Actions request. Aborting the action.
⨯ Error: Invalid Server Actions request.