v0.devでデザインを仕上げた後に、ローカルで開発を続けたい
この記事は2025年5月時点での体験を書いています。
v0.devって使ったことありますか？Next.jsの開発元であるVercelが提供している、UI/UXデザイン・コーディング支援ツールのことです。
- 自然言語のプロンプトでUIデザインを作成できる
- React（TypeScript）＋Tailwind CSS＋shadcn/uiベースで出力してくれる
- Vercelが開発しているだけあって、Next.jsの仕様に詳しい
UIからReactのコードを生成したいシーンで便利です。制約はありますが無料でも使えます。
こんなかんじでUIの直したい箇所を選んで、直接プロンプトを打てるのも便利。
最近はどんどん機能が追加されて、Vercel公式ならではの強みが増えています。
- Supabaseとの接続も簡単
- ワンクリックでデプロイできる
私はバックエンドが専門なのですが、v0のおかげでデザインとフロントエンドには頭を悩ませずに「まずは立ち上げる！」ということができるようになりました。めちゃ助かっている。
基本的にはpage.tsx単位、もしくはコンポーネント単位でv0にて調整し、ローカルのコードにペーストする方法で活用しています。
v0からローカルへ
今回は、v0で自然言語を使ってシングルページ全体のデザインを仕上げた上で、ローカルで開発を引き継ぐ、ということをやってみました。
お題はポートフォリオサイトです。これがv0でつくったデザイン。入っている内容はダミーです。
v0上で直接コードを編集してデプロイする方法もありますが、デザインでは仮で入れていた内容をがしがし編集したいのと、今後もこの方法を使うことがありそうなので、v0→ローカル移行を試してみることにしました。
うまくいかなかった方法
v0からコードをローカルに落とす方法として、公式で推奨されているのは
- npxコマンドを打つ
- zipファイルでダウンロード
の2種類があります。現状のUIだとPreviewの右上から確認できます。
今回どちらも試したのですが、結論としては両方うまくいかなかった……。
npxコマンド
上のボタンからnpxコマンドをコピペして叩くと、最後にこのように出ていました。
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.
Cannot read properties of undefined (reading 'resolvedPaths')
うーん、時間をかければ解けるかもしれませんが、今回はスキップすることに。
zipファイル
Next.jsのプロジェクトを手元で立ち上げて、zipから解凍したファイルをプロジェクトに取り込みましたが、CSSが崩壊。画面いっぱいにロゴが表示され、せっかく完成させたデザインがあちこち崩れてしまいました。
なぜかglobals.cssが違うディレクトリに2つできていて、このあたりを解消してもCSSの崩壊を直せず。左がv0で見えているコード、右がダウンロードしたコード。けっこう差分があります。
何パターンか試してみたのですが、Next.jsの初期画面しか出なくてファイルが表示されないなど、すっきり解決しないので、あきらめました！
うまくいった方法
- v0からGitHubをつなぐ
- GitHubからローカルにコードをpullする
- バージョンが合わない部分があれば修正
このボタンからGitHubを開き、リポジトリを新規作成すると、v0からGitHubにコードが移行します。
GitHubからローカルにコードをpullすると、バージョンの差異などが発生することがあるので、調整します。
そしてローカルでページを立ち上げたら、v0で完成させたデザインが完全に再現されました！やったー！！🎉
この手順は日本語検索では見つけられなかったので、自分のメモ用に記事に残しておきます。他にもデザインが崩れて困った方の参考になれば幸いです。
できたもの
ということで、完成したポートフォリオサイトがこちら。
UIはV0.devで完成させ、内容とファイル構成だけローカル開発で調整する、という進め方ができました。
これからもがしがしつくっていくぞ！
Discussion