【Week 3】AI駆動でMVP開発:Clerk認証とSupabase実装編
Week3では、Cursorを使ったMVP開発をおこないます。Cursorのセットアップや.cursorrules設定、ユーザー認証からデータベースの活用まで行います。AI駆動開発のコツもWeek3では学ぶことができます。
今回使用する技術スタック構成図を確認しておこう
無料プレビュー開発スケジュールを更新しよう
CursorのAIエディタと開発の初期セットアップをしよう
Node.js環境のセットアップをしよう
Bolt.newからCursorへ移行しよう
Githubの用意とリポジトリを作成しよう
Githubブランチ戦略とdevelopブランチの作成
.cursorrulesを設定して確認してみよう
Cursor Directoryからルールを参照しよう
mainブランチにマージしてみよう
試しにVercelでCatch Upをデプロイしてみよう
外部サービスのセットアップ完了後に再デプロイしよう
ClerkドキュメントをDocsに噛ませて認証実装をしよう
ユーザー認証の確認とアイコンを追加しよう
無料プレビューDB設計の見直しをしよう
database.buildでDB設計をもっと楽にしよう
Supabaseの初期設定をしよう
Prismaでスキーママイグレーション操作をしよう
【テスト】Vercelへ再デプロイしてみよう
ClerkのWebhook設定をはじめよう
ユーザー認証時のWebhook発火テストをしよう
ユーザー更新・削除時のWebhookも実装しよう
開発スケジュールを更新しよう
機能開発ブランチに切って開発しよう
SupabaseのMCPサーバーを起動しよう
最適なデータフェッチ戦略をCursorと壁打ちして考えよう
ストリーミングデータフェッチングを実装しよう
エラーを丁寧にAIで修正しよう
タブ切り替えで各々の記事データを表示させよう
ISRでパフォーマンスチューニングをしよう
ローカルでビルドしてISR動作を確認しよう
Cursorの記憶領域としてマークダウンファイルを活用しよう
ブランチ名の変更とgit pushしよう
Project Rulesの設定をしよう
Next.jsのベストプラクティスのルール設定をしよう
ブックマーク機能を実装しよう
ブックマークされないエラーを解決しよう:その①
ブックマークされないエラーを解決しよう:その②
ブックマークUIの変更をしよう:その①
ブックマークUIの変更をしよう:その②
トランザクションの説明とAPIリファクタリング
ブックマーク状態を最初から反映させよう
ブックマーク済みにブックマーク記事を表示させよう
残りの微修正をしよう:その①
残りの微修正をしよう:その②
MVPがついに完成👏
Week3のまとめ / Week4でやる事