Next.js App Routerで「Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"」というエラーが表示されました。このエラーの意味は？

解説

正解は「Server Actionとして"use server"を宣言せずに、関数をClient Componentに渡している」です。App Routerでは、Server ComponentからClient Componentにpropsとして関数を渡すことはデフォルトでできません。フォーム送信やデータ変更などサーバー側で実行する関数は"use server"ディレクティブを付けてServer Actionとして定義する必要があります。Server Actionsはasync関数の先頭に"use server"を記述するか、別ファイルの先頭に"use server"を宣言してその中の全関数をServer Actionにする方法があります。これによりクライアントから安全にサーバー側の処理を呼び出せます。