v0.dev & Linux｜AIでNext.js UIを自動生成→Vercelにデプロイする方法

v０とは？

v0.dev は、Vercel が提供する AI を活用した Web UI コンポーネントの生成ツール です。Tailwind CSS と Radix UI を基盤に、React コンポーネントを自動生成できます。

v0.dev の特徴

1. 自然言語から UI を生成
   • 「ダッシュボード風の UI を作成」などのプロンプトを入力すると、React コンポーネントが生成される。
2. ShadCN + Tailwind CSS に対応
   • ShadCN/UI を活用して、モダンで美しい UI を生成可能。
3. コピペですぐ使える
   • 生成されたコードは Next.js などに簡単に組み込める。
4. デザインを AI でアシスト
   • UI の修正や改良も、AI に依頼可能。

v0.dev の活用方法

• SaaS やスタートアップの MVP 開発
• React / Next.js ベースのプロジェクトの UI 構築
• AI を活用した UI 設計の高速化

v0の料金

無料プランでは、最大５つのプロジェクトを作成することができます。
有料プランは$20〜

v0.dev で作成したコードのデプロイ方法

v0.dev は コード生成ツール なので、生成された React / Next.js のコードをデプロイする流れになります。

コードを生成する

V0.dev で UI を生成 https://v0.dev/chat
例）プロンプト　時計

v0でコードが自動生成される

デプロイ

「Deploy」ボタンから、デプロイすることができます。

発行されるURLをクリックすると、デプロイされたページにアクセスできます。

お疲れ様でした。こちらでVercelへのデプロイが完了です。

Linuxサーバーで動かしてみたい方は、次の方法で確認することができます。

v0.dev で作成したコードをLinuxサーバーで実行する方法

ソースコードのダウンロード

「…」からソースコードをダウンロードします。

Next.js の新規プロジェクトを作成

Linuxサーバーにログインして、ターミナルで以下のコマンドを実行：

npx create-next-app@latest my-app
cd my-app
npm install

※ my-app はプロジェクト名なので、好きな名前に変更可能。

このコマンドを実行すると、以下のオプションを聞かれます：

• TypeScript を使いますか？ → Yes（推奨）
• ESLint を使いますか？ → Yes（推奨）
• Tailwind CSS を使いますか？ → Yes（推奨）
• src/ ディレクトリを使いますか？ → Yes（任意）
• app/ ルーターを使いますか？（Next.js 14 の新機能） → Yes（推奨）
• プロジェクトを Git に初期化しますか？ → Yes（任意）

cd my-app でプロジェクトフォルダに移動し、npm run dev で起動します。

cd my-app
npm run dev

> my-app@0.1.0 dev
> next dev --turbopack

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 15.1.6 (Turbopack)
   - Local:        http://localhost:3001
   - Network:      http://xx.xxx.xxx.xxx:3001

 ✓ Starting...
 ✓ Ready in 1297ms
 ○ Compiling / ...
 ✓ Compiled / in 3.1s
 GET / 200 in 3475ms
 ✓ Compiled /favicon.ico in 221ms

上記のURLをブラウザで入力すると、Next.js のデフォルトページが表示されます 。

• Local: http://localhost:3001
• Network: http://xx.xxx.xxx.xxx:3001

既存の Next.js プロジェクトにV0.dev のコンポーネントを追加

components/ フォルダを作成

Next.js の app/ ディレクトリ内に components/ フォルダを作成し、v0で作成したファイルをコピーする。

mkdir components

例）my-app/app/components/filename(任意).tsx

コンポーネントをページに表示

次に app/page.tsx にv0で作成したファイルをコピーする。

Tailwind CSS の設定

v0.dev は Tailwind CSS を使用するので、プロジェクトに Tailwind を追加

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js に以下が記載されていることを確認:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

globals.css に Tailwind に以下が記載されていることを確認:

@tailwind base;
@tailwind components;
@tailwind utilities;

実行

cd my-app でプロジェクトフォルダに移動し、npm run dev で開発サーバーを起動します。

cd my-app　保留
npm run dev

> my-app@0.1.0 dev
> next dev --turbopack

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 15.1.6 (Turbopack)
   - Local:        http://localhost:3001
   - Network:      http://xx.xxx.xxx.xxx:3001

 ✓ Starting...
 ✓ Ready in 1297ms
 ○ Compiling / ...
 ✓ Compiled / in 3.1s
 GET / 200 in 3475ms
 ✓ Compiled /favicon.ico in 221ms

上記のURLをブラウザで入力すると、実行結果が表示されます。ポート番号は3000または自動で調整されます。

• Local: http://localhost:3001
• Network: http://xx.xxx.xxx.xxx:3001

v0.dev で作成したコードをLinuxサーバーからVercelにデプロイする方法

Next.js のビルドを確認

ファイルを修正した場合などは、Vercel にデプロイする前に、ローカルでビルドが成功するか確認します。

npm run build

Vercel にデプロイ

Vercel は Next.js を公式サポートしているため、簡単にデプロイできます。

npm install -g vercel
vercel login

任意の方法でVercelにログインします。

プレビュー環境にデプロイ（デフォルト）
デプロイが成功すると、Preview URL が表示されます。

vercel

本番環境にデプロイ
デプロイが成功すると、Production URL が表示されます。

vercel --prod

Production: https://your-project.vercel.app

ブラウザにURLを入力すると、Vercelにデプロイしたサイトにアクセスすることができます。

お疲れ様でした。こちらでLinuxサーバーから、Vercelへのデプロイが完了です。

その他、Netlify（静的サイトやフロントエンドアプリのホスティング に特化した クラウドデプロイサービス） 等にデプロイすることや、独自サーバーにデプロイすることもできますが、今回はシンプルなVercelへのデプロイの方法をご紹介しました。

まとめ

Vercel で簡単にデプロイすることができます。
V0.dev + Next.js + Vercel の組み合わせで、スムーズな開発が可能です。

参考

v0.dev 公式ドキュメント

• https://v0.dev/docs

Next.js 公式ドキュメント

• https://nextjs.org/docs

Tailwind CSS 公式ドキュメント

• https://tailwindcss.com/docs

Vercel 公式ドキュメント

• https://vercel.com/docs

Netlify 公式ドキュメント

• https://docs.netlify.com