Next.js × Supabase で、街の写真で般若心経278字を埋めるWebアプリをつくった
非エンジニアですが、AI駆動開発で初めてのWEBサービスをリリースしました。私のような非エンジニアの皆さんに少しでも参考になればと思いまとめます。
街で見つけた文字の写真を投稿し、般若心経278字を自分の写真で埋めていくWEBアプリです。みうらじゅんさんが発明した『アウトドア般若心経』を誰もが手軽に楽しめるサービスです。
せっかく作るなら「100年続くWEBサービス」を作りたいと思い、1000年以上の歴史がある般若心経をテーマにしました。（続くといいな）
マネタイズは一切考えていないので、無料〜低コストで長く回したいと思いました。
使用したAI
Cursor
コーディングは「Cursor」を使いました。勉強も兼ねているので、AIがどのファイルを書き換えたか、どんなことを書き加えたかはできるだけ理解するよう意識しました。
コードのことはほどんど習熟しませんでしたが、GitHubの使い方やVercelでのデプロイ方法、各種ライブラリについては一定習熟することができたと思います。
ClaudeとGemini
アイディアの壁打ちは「Claude」や「Gemini」をつかいました。どんな機能があったらいいか、どんなUIがいいか、どんなページ構成が良いかなど壁打ちをするなかで具体化して行くことができました。
また、OGPの自動生成をどう実現するか、ログイン機能はどのように実装すべきか表示速度を早くするにはどうしたら良いかなど、基本的な知識も壁打ちのなかで知ることができました。
使用した技術・サービス
Next.js
なんとなくNext.jsが良いらしいという情報があり、YouTubeでNext.jsの使用方法を勉強しました。まずはハンズオンで自分のホームページを作ることで、基本的な部分を理解することができました。インストール方法と、どのファイルが何の意味を持つのかを理解することがAI開発を始める際のポイントでした。
Vercel
Next.jsをデプロイし、公開するためにVercelを利用しました。Next.jsとの相性がどうやら良いらいというのと、無料である程度使えるというのと、GitHubへPushすれば自動でデプロイできるという理由で使用しました。使い勝手はとても良く、本当にありがたいサービスです。
Supabase
ログイン機能の（Googleログインのみ）と般若心経の画像やテキスト情報の保存はSupabaseを利用しました。無料である程度使えるのと、Googleログインが簡単に実装できるのと、uiが非エンジニアでもわかりやすいのが使用した理由です。
ちなみにデータベースの作成やログイン実装のためのクエリはすべてAIに出力してもらい、操作方法もすべて教えてもらいました。一度も不具合などなく使用できております。
shadcn/ui
UIは微調整など泥沼化するのを防ぐためshadcn/uiというライブラリを使用しました。これにをインストールして、AIにshadcn/uiを使ってくれ言っておけばUIは問題ないというのが使用した感想です。
ダークモードやアイコン実装機能が標準で付いてるのもありがたいです。
工夫した点
ログインについて
セキュリティの関係で、ログイン機能はGoogleログインのみにしました。これであればユーザーのパスワード情報を取得せずにログイン機能を実装できます。
OGP自動生成
私は集めた般若心経をシェアしたいと思ったので、OGPの自動生成機能を実装しました。ZennみたいなOGP自動生成を実装したい旨をAIに伝えたところ実装できました。
なお、これはVercelの機能を使っているようでVercelと相性が良かったようです。
これからの課題とやりたいこと
適切なキャッシュ設定
今後も長く安定してサービスを運営していくために、サーバー負荷を減らす「キャッシュ」の設定を勉強中です！
OGPの安定化
Facebookなどでシェアしていただいた際、たまに画像がうまく表示されないことがあるので、原因を特定してしっかり修正したい。
たくさんの方に体験してほしい！
「まちなかで般若心経を集める」というちょっと変わった、でもすごく贅沢な体験を、ぜひたくさんの方にお届けしたいです！せっかく作ったので、だまされたと思ってぜひ一度遊んでみてください！
Discussion