0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

v0で生成したページ・アプリをローカルで動かす(v0.app版)

0
Last updated at Posted at 2026-03-01

v0がまたアップデートされました

WebアプリなどUI生成に特化したAIの「v0」ですが2026年2月にまたアップデートされました。Vercelの既存のプロジェクトに対してもAI機能が利用できるようになったようです。

Snapshot_463.png


アップデートされまくりで追いついてないですが、とりあえず以前紹介した生成したコードをローカルに移す方法は使えなくなりました。(以前の記事

現時点でのローカルに移せる方法を紹介します。

ZIPダウンロードして移すだけ

以前のような「npx shadcn~」コマンドは無くなり、生成した全てのファイルをローカルにもってくるしかないようです。

まずPCにNode.jsが無い方はインストールして下さい。やり方はこちら。


次にv0で何か生成し、画面右上の「…」から[Download ZIP]を選択してファイルをダウンロードします。

Snapshot_464.png

Snapshot_466.png


ダウンロードしたZIPを適当なフォルダに解凍してあげます。
※フォルダ名が長いので適当に変えて下さい

Snapshot_467.png


この解凍したフォルダがカレントディレクトリの状態でターミナルを起動(WindowsはPowershell、コマンドプロンプトどちらでも。すいませんMacはわかりません…)。Windowsはフォルダに入って右クリック→"ターミナルを起動"が楽です。

Snapshot_472.PNG


ここで「npm i」を実行してpackage.jsonにあるものをインストールします。(「npm install」でも同じです)

ターミナル
npm i

Snapshot_469.png


これで終わりです。お約束の「npm run dev」で起動して http://localhost:3000 で動くか確認してみてください。

ターミナル
npm run dev

Snapshot_470.png

Snapshot_471.png


あとはVS CodeやCursorなどで自由に修正したりしてみて下さい!
デプロイ方法はこちら↓

終わりに

環境を丸ごと移しているようなものなので問題ない気がするのですが、Next.jsやらReactやらのごちゃごちゃは私には到底理解が及ばないのでエラーが出たらChatGPTに聞いて下さい😅

宣伝

v0を利用したアプリを宣伝させて頂きます!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?