Server Actions must be async の直し方

文言は3種類ある

同じ原因でも、どこに書いたか、何を export したかで出る文言が変わります。実機で確かめた3つです。

検索するときは、自分の手元に出た文言で探してください。1つだけ覚えていると、別の文言に当たったときに別の問題だと思ってしまいます。

1つめ：async が付いていない

export default function Page() {
  function save(formData: FormData) {
    'use server'
    console.log(formData.get('a'))
  }
  return <form action={save}><input name="a" /></form>
}

Error: Server Actions must be async functions.

中で await していなくても async が要ります。呼ぶ側から見ると、この関数は常にネットワークを越えます。結果は必ずあとから返るので、戻り値が Promise であることが形として決まっています。

2つめ：関数以外を export している

'use server'
 
export const LIMIT = 10
 
export async function save(formData: FormData) {
  console.log(formData.get('a'))
}

Error: Only async functions are allowed to be exported in a "use server" file.

save は async なのに落ちます。落としているのは LIMIT のほうです。

なぜ関数だけなのか

use server と書いたファイルの export は、ブラウザから呼べる入口として登録されます。

入口になれるのは呼び出せるものだけです。定数や型が混ざると、ファイル全体として条件を満たしません。1つでも関数以外があれば止まります。

直し方

置き場所を3つに分けます。

app/
  actions.ts     'use server'。async 関数だけ
  limits.ts      定数と型。印は付けない
  page.tsx       画面。両方から読む

import { save } from './actions'
import { LIMIT } from './limits'
 
export default function Page() {
  return (
    <form action={save}>
      <input name="a" maxLength={LIMIT} />
    </form>
  )
}

実機で確かめました。この形でビルドは通り、ページは事前に描かれたままです。送信先を持っていること自体は、そのページを動的にしません（キャッシュの考え方）。

関数の中とファイルの先頭は、効く範囲が違う

function save() {
  'use server'
  // この関数1つだけ
}

'use server'
// このファイルの export 全部

送信先が増えるなら、ファイルの先頭に書く形のほうが整理しやすくなります。そのぶん、定数を一緒に置けないという制限が付いてきます。