はじめに
今回、新サービスを開発するにあたり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はコチラ↓