前回の「基礎編」では、Cursor の機能や使い方について紹介した。今回の「応用編」では、Cursor の AI 機能を使って実際にアプリケーションを構築していく。Cursor に不慣れな方は、スムーズに進めるためにまず基礎編から始めることをお勧めする：

今回の応用編では、「管理者は動画をアップロードして公開・販売でき、ユーザーはその動画を購入・視聴できる」Web アプリケーションを構築する。ここでは動画のみを扱うが、画像や音声などさまざまなコンテンツに応用できる。そして決済機能付き。とても実用的である。

主要技術は次の通り：

• フレームワーク：Next.js (App Router)

• データベース：Supabase Postgres

• ユーザー認証：Supabase Auth

• ストレージ：Supabase Storage

• 決済システム：Stripe API

Next.js、Supabase、Stripe の組み合わせは様々な Web アプリケーション開発に使える。慣れておいて損はない。

今回 Cursor で使用する AI モデルは、Claude 3.5 Sonnet のみ。AI 機能は、Chat、Composer、Notepads にフォーカスする。

Cursor を使えば、今回のアプリケーションは 1 時間程度で作れるだろう。のんびりやっても半日あれば完成するはずだ。

どの AI 機能でどのようなプロンプトを使用するか、そしてどのような結果になるかを本文中でたくさん紹介するので、是非参考にしていただきたい。

それでは早速、Cursor AI 開発を始めよう。

最初の準備

Supabase と Stripe のアカウントを持っていない場合は、作成しておく。Stripe の本番環境利用申請はスキップして良い。

プロジェクトの作成

ターミナルで次のコマンドを実行して、Next.js プロジェクトを作成する：

npx create-next-app@latest

What is your project named? cursor-advanced
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No

今回は、TypeScript、Tailwind CSS、App Router の使用は「Yes」を選択する。プロジェクト名やその他の構成は好きに設定していただいて構わない。

UIの実装

ホームとその他いくつかのページの UI を作成しよう。UI の生成には、v0 か Claude をお勧めする。Next.js プロジェクトだから v0 一択だろうと思考停止せずに、Claude も試してほしい。最近は Claude の UI 生成品質がかなり上がってきており、v0 より質の高いものを生成してくれることがある。

「自身の動画をアップロードして公開・販売でき、ユーザーはその動画を購入・視聴できる Web アプリケーションの UI を生成してください」

というプロンプトで生成した結果、今回は Claude の方が出来が良かったので、そちらを採用することにした。他の UI も Claude で統一する。

ホーム UI

ホームには、先ほどのプロンプトで生成された UI を使用する。プロジェクトのルートディレクトリにある page.tsx を、まるっと UI のコードに置き換えて見てみよう：

コード

アプリケーション名を「TechTube」と変更したのみで、他はそのままのコードを使用している。

インポートエラー（shadcn/ui のセットアップと各コンポーネントのインストール）については、GitHub に記載している。

ブラウザで確認するには、ターミナルで npm run dev コマンドを実行して、http://localhost:3000 にアクセスする。これで上の画像と同じ結果を確認できるはずだ。

ログイン・新規登録 UI

このままの流れで、ユーザー認証ページも作成してしまおう。Claude で次のプロンプトを入力して生成する：

「メールアドレス・パスワードでのログインと、GitHub ログインのオプションを備えたログインページおよび新規登録ページを作成してください」

また、新規登録後のメール確認案内ページも作成しておこう。プロンプトはそのままで良い：

「新規登録後のメール確認を促すページを作成してください」

これらのページを Next.js で作成しよう。この程度の作業は手動でやった方が早いので AI は使わない。app/ ディレクトリに、login/page.tsx、signup/page.tsx、email-verification/page.tsx を作成し、それぞれに生成した UI のコードをコピペする。

コード

では、ホーム、ログイン、新規登録ページをリンクしてみよう。ここでようやく AI 機能を使用する。Chat でも良いが、ここでは Composer を使う。さらにいくつか具体的な指示が必要なので、Notepads も使ってみよう。

Cmd + Shift + i (Win: Ctrl + Shift + i) で Composer をフル画面で開いて、画面左上「NOTEPADS」エリアの「+」ボタンで新しい Notepad を作成する。タイトルは「Auth Pages」としたが何でも良い。そして入力エリアに具体的な指示を入力する：

次は、Composer でこの Notepad を使用する。「COMPOSERS」エリアに「Untitled composer」がすでにあると思うので、それをクリック。入力エリアの「+」ボタンで、使用するファイル（ホーム、ログイン、新規登録の page.tsx、そして Auth Pages）を選択。最後に「Notepad の指示通りに実行してください」と入力して Enter を押す：

実行が完了したら「Accept all」の前に「Save all」して結果を見てみよう：

コード

ホームにヘッダーエリアが作成され、ログインボタンも追加されている。また、ログインページと新規登録ページ間も移動できるようになり、ホームに戻るリンクも追加されている。すべて Notepad の指示通り実行されている。素晴らしい。

問題なければ、「Accept all」してコードの変更を承認する。

ボタンのスタイルなど細い修正が必要な場合は、Chat や Cmd K を使用して修正すれば良い。