Zenn
🎇

v0+Next.js+Cursorの連携方法

2024/12/07に公開

前提条件

手順

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:3000Starting...Ready in 1628ms
  • v0で作成したデザイン画面が表示されれば成功!

  • 開発サーバー起動時にエラーが表示された場合はcursorにて修正
1.エラー文を選択
2.Add to Chat(Ctrl+Shift+L)にてCHATにエラー文を追加
3.CHATにてエラー解消についてのプロンプトを入力
4.提案されたソースコード修正案を取り込む場合はApply > Apply current to fileをクリック
5.ファイルの変更を保存

参考サイト

Discussion

ログインするとコメントできます