🎇
v0+Next.js+Cursorの連携方法
前提条件
- v0の登録(無料プラン)が完了していること
- Next.jsのプロジェクト作成が完了していること
- Cursorのインストールが完了していること
- 参考 : Cusor(カーソル)のインストール手順
手順
- v0にて任意のプロンプトを入力し、コードを生成
1.instagramのような写真投稿アプリを作成してください
2.バックグラウンドの色を黒に変更してください
3.ボタンの色は白にし、サイトタイトルをSample Next.jsに変更して下さい
- 右上のInstallボタンをクリックし、表示されたコードをコピー
npx shadcn@latest add "URL"
- cursorを開く
- 作成したnextjsプロジェクト配下に移動し、v0をインストール
cd .\my-nextjs-app\
npx v0@latest init
実行結果
Need to install the following packages:
v0@2.2.5
Ok to proceed? (y) y
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed. You can now starting adding components.
- v0で取得したコードを実行
npx shadcn@latest add "URL"
実行結果
// shadcn@2.1.6インストールについてyを入力してエンター
Need to install the following packages:shadcn@2.1.6
Ok to proceed? (y) y
// 依存関係についてのエラーが発生した場合はUse --forceを選択してエンター
√ How would you like to proceed? » Use --force
// layoutファイルの上書きについてyを入力し、エンター
√ The file layout.tsx already exists. Would you like to overwrite? ... yes
// pageファイルの上書きについてyを入力し、エンター
√ The file page.tsx already exists. Would you like to overwrite? ... yes
- 開発サーバーを起動し、http://localhost:3000をクリック
npm run dev
実行結果
> my-nextjs-app@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.0.3 (Turbopack)
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 1628ms
- v0で作成したデザイン画面が表示されれば成功!
- 開発サーバー起動時にエラーが表示された場合はcursorにて修正
1.エラー文を選択
2.Add to Chat(Ctrl+Shift+L)にてCHATにエラー文を追加
3.CHATにてエラー解消についてのプロンプトを入力
4.提案されたソースコード修正案を取り込む場合はApply > Apply current to fileをクリック
5.ファイルの変更を保存
Discussion