はじめに

今回、新サービスを開発するにあたりLPのコストをできるだけ抑えようと思った結果、以下のスタックで開発することにした。

Next.js
フロントエンドの実装
Supabase
WaitinglistのDBやストレージ
v0
LPのUIデザイン
Cloudflare pages
本番/ステージング環境

このスタックを用いて開発した結果費用は¥0となりコスト削減は達成できたが、問題が発生した。

ServerActionsが動かねぇ!!!

本来であれば

の順にデータ処理を行いSupabaseにデータを格納したかったのだが、
ServerActionsを叩いたときに405 method not allowedが返された。

どうもNext.js v13の時は問題ないようなのだが、v14以降でServerActionsが動かなくなってるらしい。
ましてや今回はv15のAppRouterを使っているので諦めようとした。

ServerActionsではなくAPIRoutesを使う

つまり、ServerActionsだと静的ページにPOSTを送るためなんらかの制限がかかっているが、APIRoutesは普通に処理ができるらしいので今回は

の流れで処理を行った。

最高の環境でいいLPができました(¥0で)
作ったLPはコチラ↓