背景
AIで色々なものを作る中で、やっぱり「新しいこと学ぶには量だな。じゃあ制作物を100個作ろう」と思って、そのリンク集となるサイトを作ることにしました。
制作物を仲間に見せて意見をもらったり、刺激をしあったり、参考にしてもらったり。そんなことも意識しています。
採用した技術
- UI：Next.js App Router + shadcn/ui + Tailwind CSS
- データ管理：
apps.json（JSONファイルをGit管理） - デプロイ：Vercel（Hobbyプラン）
データベースは使わず、apps.json を直接編集してpushするだけで更新できる構成にしました。私1人で管理する規模なら、これで十分です。テキストなのでAIがいじりやすいという利点もあります。
UIはv0.devで生成
最初のUI生成には v0.dev（Vercelが提供するAIコンポーネント生成ツール）を使いました。以下のようなプロンプトを渡すと、そのままコピーして使えるNext.jsコードが出てきます。
Next.js App Router + shadcn/ui + Tailwind CSSで、
Webアプリのリンク集サイトを作ってください。
【機能】
- グリッドビューとリストビューをトグルで切り替え
- タグで絞り込みフィルター（複数選択可）
- カードにはサムネイル・タイトル・説明・タグバッジを表示
- ダークモード、Geistフォント
Vercelはひとまず無料で使える範囲で使う
Vercelはサーバー管理が不要なPaaSです。私はHobbyプラン（無料）から始めて、商用化が必要なものだけ有料のProに移行する方針にしようと考えています。
プロジェクト数では課金されないため、アクセスが少ないアプリを多数置いても基本料金は変わりません。Webアプリ100個を目指す上では、この点が重要でした。