Next.js×Supabase×Vercelでエンジニア的推し活
背景
僕が推しているアイドルグループ「わーすた」はライブの円盤が全然ありません！
その代わりに？ライブではスマホでのみ撮影が可能になっています。
つまりYoutubeには4Kのライブ撮影動画がゴロゴロ転がっているのです。
が、いかんせん探すのが難しい...
というわけで思い立ったのが今回作ったサービス「わーすたアーカイブ」です。
この記事では、そんな背景で作った個人開発の取り組みをまとめた記事です。
作ったもの
機能要件
GPT4と壁打ちしながらざっと書き出しました。
-
ユーザー認証
- ログイン機能: メール/パスワードまたはGoogleアカウントを使用したログイン。
- アカウント作成機能: 新規ユーザーがアカウントを作成できるようにします。
- ログアウト機能: ログイン中のユーザーがログアウトできるようにします。
-
イベントの作成と保存
- イベント作成フォーム: ユーザーがイベントの詳細（日時、場所、Youtubeリンク、タグ）を入力できるフォーム。
-
イベントの検索
- 検索ページ/機能: タグによるフィルタリング機能とキーワード検索機能。
-
イベント詳細表示
- イベント詳細ページ: 場所、日時、Youtubeリンクの表示と関連するタグの表示。
-
その他のユーザーインターフェース
- ナビゲーションバー: さまざまなページへのリンクを提供。
- ユーザープロファイルページ: ユーザーが自分の情報を確認・編集できるページ。（公開時は不要）
-
セキュリティとパフォーマンス
- 入力バリデーションと認証チェック。
-
デプロイメントとメンテナンス
- 自動デプロイとロギングとモニタリング。
ほとんどこのままで公開まで進めました。
採用技術
今回は触ってみたい技術を中心にいかに早く、楽に、安くできるかを考えながら選定しました。
- フロントエンド: Next.js
- バックエンド？: Supabase
- デプロイメント: Vercel
- パッケージ管理: yarn
- UIフレームワーク: Tailwind CSS
開発要点
UIデザイン
text to UIのGalileo AIというサービスを使ってみました。
他にも同様の機能があるツールは見たことがありますが、こいつは別格でした。
アクセスすると他ユーザーの生成データが見れるのですが、このテキストだけでこの質が出てくるのやばくないですか？
しかも課金すればすぐFigmaにコピペできちゃいます。
欲を言えば日本語のテキストでデザインしていい感じにしてくれると嬉しいかな！
あとはカラーコードなんかも指定できれば良いけど、そこまでは細かくできませんでした💦
（メンカラでデザインしたかったけどそこは自分で...）
Next.js
Next.jsを採用した理由は、単純に触ってみたかったから！笑
普段はNuxtで仕事してるのでVueとの違いを実際に体感して学んでみようと思いました。
画像の最適化やSSR/SSGのカスタマイズは理解して使えばかなり良いなぁと感じました。
あとはSEOに関してあまり探究できてないので検証していきたいですね。
Tailwind CSS
CSSには何かしらのフレームワークを採用しようと思いました。
普段はNuxtとVuetifyという組み合わせなので、今回はTailwind CSSを触ってみようと思いました。（Bootstrapは経験済み）
これがなかなかクセつよな感触でした笑
慣れるまでチートシートと行ったり来たりでしたが、慣れるとクラス名を考えなくてよかったりテンプレートも豊富なので助かりました。
Supabase
要件的にシンプルなAPIが作れれば良さそうだし楽したかったのでBaaS (Backend As A Service)を探しました。Railway等も検討しましたが、ある程度無料プランで耐えられそうなのと、認証周りが簡単そう、PostgreSQLなのでとっかかりやすそうといった理由でSupabaseにしてみました。
ローカルで開発を進められるCLIも用意されていたり、APIのリクエストもすぐ慣れたので開発者としての体験は良いように感じました。
ただ、無料プランだと自動バックアップできないので何か方法がないか考え中です。しかも無料プランの次がいきなり$25/月なのでリクエストやストレージが超えた時にどうするか...
Vercel
Vercelでのデプロイメントを選択した理由は、Next.jsアプリケーションのシームレスな統合、Supabaseとも自動で連携できそうだったからです。
ほんとに管理画面をぽちぽちするだけでSupabaseのプロジェクトと連携して勝手に環境変数取ってきてくれるのでめちゃくちゃ楽でした。最高。
ChatGPT（GPT4）
Reactに関しては門外漢だったのでGPT4をフル活用してみました。
この点については以下記事で詳細をまとめています。
CodeRabbit
一人での開発ですが、mainへのマージと同時にデプロイされるのでPRを都度作るようにしています。
どんな変更があったか残しておきたいのでAIでレビューと要約をしてもらいました。
オープンリポジトリだと無料でいけるっぽいです。
こんな感じでPRの変更内容をまとめてくれたり、
レビューしてくれるので、一人増えたみたいです笑
（ゴリ押してすまん😂）
全体的な課題感
とりあえず動くと思うからリリースしようぜ！なので、クソコードが頻発しています！
コード面では型定義見直ししてパフォーマンス、SEOを検証続けていきたいですね...
サービスの質的にデータがあってこそのアプリなのでデータ投入も頑張ります...（どっかからクローリングとかで連携できれば良いけど...）
まとめ
Next.js, Supabase, Vercelの組み合わせ、思ったよりもめちゃくちゃ早く進められました...
仕事では他の人がやってくれるのでふわっとした理解で大丈夫なところも一人だとちゃんと理解してかないといけないのは良いところだなぁと思ってます。一方で自分一人の責任なので「まぁこれでいっか」で質が下がるのはあんまり良くないですね笑（ケツを拭くのも自分なので良いけど）
一連の流れで"作る楽しさ"を再確認した気がします。
参考
Discussion