v0とは｜使い方・料金・ローカルで動かす手順をNext.jsで実演

v0 にプロンプトを送るとコードとプレビューができ、チャットや Design Mode で直してから、Vercel に公開するか、GitHub 経由で手元に持ってきて動かします。

flowchart TD
    A[プロンプト・画像・Figma] --> B[v0 が生成<br>Next.js と shadcn/ui]
    B --> C[プレビューで確認<br>チャットと Design Mode で直す]
    C -->|Publish| D[Vercel で公開]
    C -->|GitHub 連携・ZIP| E[手元で npm run dev]
    E -->|git push| D

よく使う操作を先にまとめます。

やりたいこと	v0 での操作	補足
画面やアプリを作る	v0.app でプロンプトを送る	日本語で書ける
無料で試す	Free プラン	1日7メッセージまで
見た目を直す	Design Mode（Cmd/Ctrl＋I で選ぶ）	文字・色・余白・角丸
公開する	Publish → Publish Changes	vercel.app の URL が付く
手元で動かす	GitHub 連携か ZIP → npm install	Node.js 20.9 以上
料金	Plus 月30ドル／ユーザー	2026年10月22日時点
部品を足す（手元）	npx shadcn@latest add 名前	components/ui に入る
プログラムから使う	v0 Platform API（v0-sdk）	API キーが要る

確認環境：v0 の機能・料金・画面の名前は、v0 の公式ドキュメント（v0.app/docs。料金のページは 2026年10月21日更新）と料金ページ（v0.app/pricing）で確かめました。v0 の出力と同じ形のプロジェクトは、Ubuntu 24.04・Node.js 22.22.2・npm 10.9.7 で create-next-app 16.4.2 から作り、Next.js 16.4.2・React 19.3.0・Tailwind CSS 4・shadcn/ui の new-york-v4 の部品（button・card・input・badge。shadcn-ui/ui の GitHub のソースを手動インストールの形で配置）・geist 1.8.2 で next build・next start・next dev を実行し、Chromium（Playwright）で画面を操作して確かめました。エラーは同じプロジェクトでわざと起こした原文です。v0 の Model API の呼び方は、curl 8.5.0 と AI SDK（ai 7.0.148・@ai-sdk/vercel 3.0.30）を自作の擬似サーバーに向けて、送られたリクエストを記録しました。Vercel CLI 65.1.0 はヘルプとログインなしの動作だけを確かめています。Bolt・Lovable・Cursor は各社の公式の料金ページとドキュメントで確かめました（確認日 2026年10月22日）。

v0とは（読み方・何ができるか）

この節では、v0 が何をするサービスで、何を作れるかが分かります。

v0（ブイゼロ）は、Vercel が提供する、文章で頼むと Web の画面やフルスタックのアプリのコードを作る AI エージェントです。 公式ドキュメントは「本物のコードとフルスタックのアプリやエージェントを作る AI エージェント」と説明しています。作ったものはその場でプレビューでき、ボタン1つで Vercel に公開できます。読み方は日本語では「ブイゼロ」と呼ばれることが多く、公式ドキュメントに読み方の記載はありません。

もとの URL は v0.dev で、今は v0.app で提供されています（Vercel のコミュニティでは 2025年8月11日に「v0.dev is now v0.app」の発表の回がありました）。Vercel 本体（Next.js のアプリを公開するホスティング）と v0（コードを作る AI）は別のサービスで、v0 で作ったものを Vercel に公開する、という関係です。

公式ドキュメントにある機能を、種類ごとに並べます。

機能	できること	公式の画面・操作の名前
生成	文章・画像・Figma から UI とアプリを作る	プロンプト欄、＋ → Import from Figma
修正	チャットで直す。見た目は画面で直接直す	Design Mode・Apply
コード	ファイルを見る・手で直す・保存する	Code タブ・Save
エラー修正	公開時のエラーのログを v0 に渡して直させる	Fix with v0・Fix Build
エージェント	サンドボックスでコマンドを実行、Web 検索	（チャットの中で自動）
データ	DB・ストレージの連携、環境変数	Settings → Integrations
公開	Vercel への公開、独自ドメイン	Publish・Settings → Domains
Git	GitHub のリポジトリと同期	Settings → GitHub
API	自分のプログラムから v0 を呼ぶ	v0 Platform API（v0-sdk）

公式ドキュメントが挙げる、v0 が使う技術は Next.js・React・TypeScript・Tailwind CSS・shadcn/ui です。データ分析向けには Snowflake・Python・SQL・Matplotlib・Pandas も挙がっています。Vue や Svelte の記載はありません。

v0の料金とクレジット（2026年10月22日時点）

この節では、無料でどこまで使えるか、有料にするといくら・どれだけ使えるかが分かります。

v0 の料金ページと公式ドキュメント「Pricing」で確かめた、2026年10月22日時点のプランです（税抜き・米ドル）。

プラン	月額	含まれるもの
Free	0ドル	1日7メッセージまで。新規は1回限りの5ドル分のクレジット。Vercel への公開・Design Mode・GitHub 同期
Plus	30ドル／ユーザー	毎月30ドル分のクレジット、ログインで毎日2ドル分、全モデル、チーム共有、追加購入
Business	100ドル／ユーザー	Plus の内容に加え、学習への利用を既定でオフ（Training opt-out by default）
Enterprise	個別見積もり	学習に使わない、SAML SSO、ロール別の権限、優先アクセス、サポートの SLA

月20ドルの Premium は、ドキュメントでは「終了に向けて新規の受付を止めた」プランです。料金ページでは Plus の表示に30ドルと90ドルの2つの数字が並んでいますが、どちらがどの条件の値かの説明はありません。公式ドキュメント「Pricing」の表は Plus を月30ドル／ユーザーとしています。

クレジットの数え方

v0 のクレジットはドル建てで、1回のやりとりの入力トークンと出力トークンの数に、モデルごとの単価を掛けた分が減ります。 公式ドキュメントでは、プロンプトと添付のほか、チャットの履歴・プロジェクトのファイル・Vercel 固有の情報も入力として数えるため、やりとりが長くなるほど1回あたりの消費が増えます。料金ページのモデルごとの単価（100万トークンあたり）です。

モデル	入力	キャッシュ読み取り	出力
v0 Mini	0.20ドル	0.02ドル	1.20ドル
v0 Pro	2ドル	0.20ドル	10ドル
v0 Max	5ドル	0.50ドル	25ドル
v0 Max Fast	10ドル	1ドル	50ドル

キャッシュへの書き込みは、それぞれ入力の1.25倍（Mini 0.25ドル・Pro 2.50ドル・Max 6.25ドル・Max Fast 12.50ドル）です。料金ページは v0 Max Fast を「出力の速さが2.5倍」と説明しています。

1回のやりとりで「入力5万トークン・出力5千トークン」を使うと仮定し、キャッシュを使わない場合で Python で計算した目安です。実際の消費はチャットの長さで変わり、v0 の Usage の画面（v0.app/settings/usage）で確かめられます。

モデル	1回あたり	30ドル分で何回	5ドル分で何回
v0 Mini	0.016ドル	約1,875回	約312回
v0 Pro	0.15ドル	約199回	約33回
v0 Max	0.375ドル	約80回	約13回
v0 Max Fast	0.75ドル	約40回	約6回

クレジットの期限と、無くなったとき

公式ドキュメントにある決まりです。

• クレジットが無くなると、生成が止まります。 Premium・Plus・Business はいつでも追加で買えます（Enterprise は担当の営業に連絡）。
• 使い残した月のクレジットは翌月に繰り越され、65日で失効します。 追加で買ったクレジットは購入から1年で失効し、有料プランが切れても残高は残りますが、使うには有料プランが要ります。
• Plus・Business・Enterprise では、各ユーザーの月のクレジットを使い切ったあと、チームで買った共有のクレジットが使われます。
• ChatGPT Plus・Pro の契約をつなぐと、対応する OpenAI のモデルの応答はその契約で払えます。ただし v0 のクレジットの残高は要り、リクエストごとの手数料・画像の生成・サブエージェントの作業は v0 のクレジットから引かれます。ChatGPT 側の上限に達すると生成は止まり、v0 のクレジットに自動では切り替わりません。

有料プランへの切り替えは料金ページ（v0.app/pricing）から行い、プラン・クレジットの残高と期限・支払い方法・請求書は Billing の画面で見られます。

v0 で作ったものを Vercel に公開したときのホスティングの料金は、v0 の料金とは別に Vercel のプランで決まります。Vercel の Hobby プランは無料ですが、Vercel のドキュメントでは 個人の非商用の利用に限られます。

v0の始め方と使い方（作成→修正→公開）

この節では、アカウントを作ってから、画面を作り、直し、公開するまでの流れが分かります。

Design Mode で直せるもの

公式ドキュメントにある、Design Mode で画面から直せる項目です。プレビューの上の Design Mode ボタンで開き、Inspect（Cmd＋I／Ctrl＋I）で要素を選びます。

種類	直せる項目
文字	フォント・サイズ・太さ・行の高さ・字間・揃え・下線など
色・背景	文字の色・背景の色
余白	margin・padding（上下左右）
枠・見た目	枠の色・種類・太さ、透明度、角丸、影
中身	要素の文字そのもの

パネルで直せない構造の変更は、文章で指示します。v0 は、選んだ要素のスクリーンショットを付けてその指示を送ります。

公開・GitHub・ブランチの関係

GitHub とつなぐと、v0 はチャットごとに作業用のブランチを作り、生成したコードをそこへ自動でコミット・push します。Publish を押すと、プルリクエストを作る（あれば再利用する）→ 元のブランチにマージする、の順で本番が更新されます。ブランチの保護ルールでマージが止められたときは、プルリクエストを開いたまま GitHub へのリンクを出します。すでにあるリポジトリから始めるときは Import from GitHub を使います。チャットを他の人と一緒に見たり直したりするときは、チャットの上の Invite から招待します（Plus 以上はチームでチャットを共有できます）。

v0のプロンプトの書き方（例文つき）

この節では、v0 にどう頼むと狙ったものが出やすいかが、例文で分かります。

Vercel の公式ブログ「How to prompt v0」（2025年12月15日）は、よいプロンプトに入れる3つとして 画面の中身（Product surface）・使われ方（Context of use）・条件と好み（Constraints & taste） を挙げています。

ブログの例を日本語にした形です。そのまま v0 に送れます。

サポートチーム向けのダッシュボードを作ってください。

【画面の中身】
- 未対応のチケット数、平均応答時間
- 優先度ごとのチケット数
- 担当者ごとの担当件数と状態のバッジ
- 最近の対応履歴

【使われ方】
- 5〜10人をまとめるリーダーが、スマホで30分ごとに開く
- 負荷が偏った担当者を見つけて、割り振りを変えるために使う

【条件】
- スマホ優先。スマホでは2列まで
- 明るい配色でコントラストを高く。優先度は色で分ける

公式ドキュメント「Text Prompting」にある書き方の要点と例です。

書き方	例（公式ドキュメントの例を日本語に）
具体的に書く	「ヒーロー・作品一覧・問い合わせフォームのあるデザイナーのポートフォリオ。レスポンシブ対応」
技術を指定する	「Next.js の App Router・TypeScript・Tailwind CSS でタスク管理アプリ」
大きいものは分ける	「ヘッダーを作る」→「その下にヒーローを足す」→「料金表を足す」
計画から作る	「予約システムの PRD を作って」→「PRD をもとに MVP を作って」
エラー時の動きを書く	「通信エラー・不正な入力・データが空のときの表示を入れて」
型で頼む（CRUD）	「一覧・追加と編集のフォーム・削除の確認・検索とページ送りのある管理画面」

直し方は、ブログのとおり 「仕組みや構成はプロンプトで、見た目の微調整は Design Mode で」 と分けると、クレジットを使いすぎずに済みます。手元に持ってきたあとも Claude Code などで同じように直せます。AI に頼んでコードを作る開発の進め方は、関連記事「AI駆動開発とは？バイブコーディングとの違いと導入手順」で扱っています。

v0が生成するコードの構成（Next.js・shadcn/ui・Tailwind）

この節では、v0 のコードがどんなファイルでできているかを、同じ構成を手元で作った実物で見られます。

v0 は Next.js（App Router）・React・TypeScript・Tailwind CSS・shadcn/ui でコードを作ります。shadcn/ui は、npm から読み込むライブラリではなく、部品のソースを自分のプロジェクトの components/ui/ にコピーして使う仕組み です。どこに何を置くかは components.json に書かれます。

create-next-app 16.4.2 で作ったプロジェクトに、shadcn/ui の部品（button・card・input・badge）と、それを使う画面・フォーム・API を足したときのファイルの一覧です。

.
├── AGENTS.md                  ← create-next-app 16.4 が作る、AI 向けの注意書き
├── app/
│   ├── api/signup/route.ts    ← API（Route Handler）
│   ├── globals.css            ← Tailwind と shadcn/ui の色の変数
│   ├── layout.tsx
│   └── page.tsx               ← トップの画面（サーバーコンポーネント）
├── components/
│   ├── signup-form.tsx        ← "use client" のフォーム
│   └── ui/                    ← shadcn/ui の部品（自分のコードとして持つ）
│       ├── badge.tsx
│       ├── button.tsx
│       ├── card.tsx
│       └── input.tsx
├── components.json            ← shadcn/ui の設定
├── lib/utils.ts               ← cn()（クラス名をまとめる関数）
├── next.config.ts
├── package.json
├── public/
└── tsconfig.json              ← "@/*": ["./*"] の別名

ファイル	役割	直すとき
app/page.tsx	画面。既定はサーバーで描くコンポーネント	文言・並び
components/*.tsx	画面の部品。状態を持つものは "use client"	動き
components/ui/*.tsx	shadcn/ui の部品のソース	見た目の種類を足す
app/globals.css	色・角丸の CSS 変数（oklch）	配色を変える
components.json	部品の置き場所・スタイル・アイコン	shadcn add が読む
lib/utils.ts	cn()。clsx と tailwind-merge	触らないことが多い

package.json の依存

shadcn/ui の部品が使うパッケージを足したあとの依存です。

{
  "dependencies": {
    "@radix-ui/react-slot": "^1.5.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "geist": "^1.8.2",
    "next": "16.4.2",
    "react": "19.3.0",
    "react-dom": "19.3.0",
    "tailwind-merge": "^3.7.0"
  },
  "devDependencies": {
    "@tailwindcss/turbopack": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "tailwindcss": "^4",
    "tw-animate-css": "^1.4.0",
    "typescript": "^5"
  }
}

パッケージ	何に使うか
@radix-ui/react-slot	asChild で、Button の見た目を <a> などに付ける
class-variance-authority	variant・size ごとのクラスの表（cva）
clsx・tailwind-merge	クラス名をつなぎ、Tailwind の重なりを後勝ちにする
tw-animate-css	開閉などのアニメーションのクラス
geist	Vercel の Geist フォントを自分のサーバーから配る
lucide-react	アイコン。v0 のコードでよく使われる（この例では使っていない）

components.json と lib/utils.ts

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Tailwind CSS 4 では tailwind.config.js が無く、"config": "" のままです。色は app/globals.css の CSS 変数で決まります（先頭の部分）。

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-primary: var(--primary);
  --radius-lg: var(--radius);
}

--primary を変えると、bg-primary を使うボタンなどの色がまとめて変わります。Tailwind CSS 4 の書き方は、関連記事「Tailwind CSS 使い方｜v4の導入からつまずき対策まで実行結果つき」で扱っています。

shadcn/ui の部品の中身（Button）

components/ui/button.tsx の要部です。cva で variant（見た目の種類）と size ごとのクラスを表にしています。

const buttonVariants = cva(
  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium ...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-white hover:bg-destructive/90 ...",
        outline: "border bg-background shadow-xs hover:bg-accent ...",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground ...",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: { default: "h-9 px-4 py-2", xs: "h-6 ...", sm: "h-8 ...", lg: "h-10 ...", icon: "size-9" },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
)

function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
  const Comp = asChild ? Slot : "button"
  return (
    <Comp data-slot="button" data-variant={variant} data-size={size}
      className={cn(buttonVariants({ variant, size, className }))} {...props} />
  )
}

variant に書けるのは、この表にある6つだけです。 表に無い値を書くと、後の「エラー」の節のとおり型のエラーでビルドが止まります。新しい見た目が欲しいときは、この表に1行足します。部品のソースが自分の手元にあるので、こうした変更を自由にできるのが shadcn/ui の特徴です。

画面・フォーム・API のコード

v0 がよく作る形（サーバーコンポーネントの画面＋"use client" のフォーム＋API）で書いた、勉強会の申し込みページです。

// app/page.tsx（サーバーコンポーネント）
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SignupForm } from "@/components/signup-form"

const sessions = [
  { title: "Next.js 入門", date: "11月5日", level: "初級" },
  { title: "shadcn/ui でフォーム", date: "11月12日", level: "中級" },
  { title: "Vercel へのデプロイ", date: "11月19日", level: "初級" },
]

export default function Page() {
  return (
    <main className="mx-auto flex max-w-3xl flex-col gap-8 px-4 py-12">
      <header className="flex flex-col gap-2">
        <Badge variant="secondary">参加無料</Badge>
        <h1 className="text-3xl font-bold tracking-tight">社内勉強会 2026 秋</h1>
        <p className="text-muted-foreground">3回の勉強会から、参加する回を選んで申し込みます。</p>
      </header>
      <section className="grid gap-4 sm:grid-cols-3">
        {sessions.map((s) => (
          <Card key={s.title}>
            <CardHeader>
              <CardTitle>{s.title}</CardTitle>
              <CardDescription>{s.date}</CardDescription>
            </CardHeader>
            <CardContent>
              <Badge variant="outline">{s.level}</Badge>
            </CardContent>
          </Card>
        ))}
      </section>
      <SignupForm sessions={sessions.map((s) => s.title)} />
    </main>
  )
}

// components/signup-form.tsx（クライアントコンポーネント）
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"

export function SignupForm({ sessions }: { sessions: string[] }) {
  const [email, setEmail] = useState("")
  const [session, setSession] = useState(sessions[0])
  const [message, setMessage] = useState("")

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const res = await fetch("/api/signup", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, session }),
    })
    const data = await res.json()
    setMessage(res.ok ? `${data.session} に申し込みました` : data.error)
  }

  return (
    <Card>
      <form onSubmit={onSubmit}>
        <CardHeader>
          <CardTitle>申し込み</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-3 py-4">
          <Input type="email" placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
          <fieldset className="flex flex-wrap gap-2">
            {sessions.map((s) => (
              <Button key={s} type="button" size="sm" variant={s === session ? "default" : "outline"} onClick={() => setSession(s)}>
                {s}
              </Button>
            ))}
          </fieldset>
        </CardContent>
        <CardFooter className="flex items-center gap-3">
          <Button type="submit">申し込む</Button>
          <p className="text-sm text-muted-foreground" aria-live="polite">{message}</p>
        </CardFooter>
      </form>
    </Card>
  )
}

// app/api/signup/route.ts（Route Handler）
export async function POST(request: Request) {
  const { email, session } = await request.json()
  if (typeof email !== "string" || !email.includes("@")) {
    return Response.json({ error: "メールアドレスの形が正しくありません" }, { status: 400 })
  }
  return Response.json({ ok: true, email, session }, { status: 201 })
}

// app/layout.tsx（フォントは geist パッケージから。理由はエラーの節）
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import "./globals.css"

export const metadata: Metadata = {
  title: "社内勉強会 申し込み",
  description: "v0 の出力と同じ形の Next.js + shadcn/ui のひな形",
}

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="ja" className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}>
      <body className="min-h-screen font-sans">{children}</body>
    </html>
  )
}

App Router のファイルの決まり（page・layout・route）とサーバー／クライアントの分け方は、関連記事「Next.js App Router 入門｜v16対応・実際のビルド結果つき」で扱っています。

v0のコードをローカルで動かす手順（npm install・dev・build）

この節では、v0 のコードを手元に持ってきて、開発サーバーで動かし、本番用にビルドするまでの実物が分かります。

手元に持ってくる方法は、GitHub 連携（公式ドキュメントの方法）か、ZIP のダウンロードです。 以前の v0 にあった「Add to Codebase」（npx shadcn add で取り込むコマンドを出す機能）について、2026年2月の Vercel コミュニティの回答は Download ZIP を案内しています。Code タブでは、開いているファイルを1つずつコピー・ダウンロードもできます。

方法	手順	向いている場面
GitHub 連携	Settings → GitHub → Connect の後、git clone	続けて v0 と手元の両方で直す
ZIP	チャットのメニューから Download ZIP して展開	1回だけ持ち出す
ファイル単位	Code タブの Copy file contents・Download file	既存のプロジェクトに1画面だけ足す

動かすコマンド

Next.js 16.4.2 は Node.js 20.9.0 以上が要ります（package.json の engines）。

cd 展開したフォルダ
npm install        # 依存を入れる（pnpm-lock.yaml があれば pnpm install）
npm run dev        # 開発サーバー（http://localhost:3000）
npm run build      # 本番用にビルド
npm start          # ビルドしたものを起動

create-next-app 16.4.2 の依存を入れたときの表示と、かかった時間です。

added 364 packages, and audited 365 packages in 41s

開発サーバー（ポート 31701 で起動）の表示です。最初のアクセスでページをコンパイルし、2回目からは速くなりました。

▲ Next.js 16.4.2 (Turbopack)
- Local:         http://localhost:31701
- Network:       http://192.0.2.2:31701
✓ Ready in 393ms
✓ Running next.config.ts took 36ms
- Cache Components enabled
- Partial Prefetching enabled

○ Compiling / ...
 GET / 200 in 399ms (next.js: 206ms, application-code: 192ms)
 GET / 200 in 60ms (next.js: 2ms, application-code: 58ms)

Cache Components enabled と Partial Prefetching enabled は、create-next-app 16.4.2 が作る next.config.ts に cacheComponents: true・partialPrefetching: true が入っているためです。v0 から持ってきたプロジェクトの next.config は、そのプロジェクトのものを使います。

本番用のビルドの出力

npm run build（next build）の出力です。.next が無い状態から、全体で10.1秒でした。

▲ Next.js 16.4.2 (Turbopack)
✓ Running next.config.ts took 27ms
- Cache Components enabled
- Partial Prefetching enabled

  Creating an optimized production build ...
✓ Compiled successfully in 5.6s
  Running TypeScript ...
  Finished TypeScript in 2.9s ...
  Collecting page data using 1 worker ...
✓ Generating static pages using 1 worker (5/5) in 245ms
  Finalizing page optimization ...

Route (app)
┌ ○ /
├ ○ /_not-found
└ ƒ /api/signup


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

トップの / は静的なページ（○）としてビルド時に作られ、/api/signup はリクエストごとに動く（ƒ）と表示されました。 ビルドの途中で TypeScript の型検査が走るので、v0 のコードに型の誤りがあるとここで止まります。ビルドする前に npm start を実行すると、Error: Could not find a production build in the '.next' directory. になりました。

起動して確かめる

npm start -- -p 31700 で起動し、curl でトップの応答ヘッダーを見ました（要部）。

HTTP/1.1 200 OK
x-nextjs-cache: HIT
x-nextjs-prerender: 1
link: </_next/static/media/GeistMono_Variable.p.3wg2gzp0j70gu.woff2>; rel=preload; as="font"; ...
X-Powered-By: Next.js
Cache-Control: s-maxage=31536000
Content-Type: text/html; charset=utf-8
Content-Length: 20837

返ってきた HTML では、shadcn/ui の部品が data-slot の付いたふつうの HTML 要素とクラスになっていました。たとえば1枚目のカードは data-slot="card" の要素に flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm のクラスが付き、その中の data-slot="card-title" に「Next.js 入門」が入っていました。HTML の中の data-slot を数えた結果です。

card: 4  card-header: 4  card-title: 4  badge: 4  button: 4  input: 1

カードは勉強会の3枚と申し込みフォームの1枚、ボタンは回を選ぶ3つと申し込むボタンです。

API には curl で POST しました。

$ curl -i -X POST http://127.0.0.1:31700/api/signup -H 'Content-Type: application/json' \
    -d '{"email":"sato@example.com","session":"Next.js 入門"}'
HTTP/1.1 201 Created
content-type: application/json
{"ok":true,"email":"sato@example.com","session":"Next.js 入門"}

$ curl -i -X POST http://127.0.0.1:31700/api/signup -H 'Content-Type: application/json' \
    -d '{"email":"sato","session":"Next.js 入門"}'
HTTP/1.1 400 Bad Request
content-type: application/json
{"error":"メールアドレスの形が正しくありません"}

最後に、Chromium（Playwright、画面の幅 390px＝スマホの幅）でページを開き、回を選んで申し込むボタンを押しました。

title: 社内勉強会 申し込み
h1: 社内勉強会 2026 秋
cards: 4
selected variant: default
message: Vercel へのデプロイ に申し込みました
scrollWidth at 390px: 390
body font: GeistSans, "GeistSans Fallback"
request: POST /api/signup

押したボタンの data-variant が default に変わり、API への POST が1回送られて、メッセージが表示されました。v0 のプレビューで見ていたのと同じ動きを、手元で確かめられます。

手元で shadcn/ui の部品を足す

v0 のコードには、使った部品だけが components/ui/ に入っています。手元で別の部品を使うときは、shadcn/ui の CLI で足します（公式ドキュメント「CLI」）。components.json を読んで、決まった場所にソースを書き込み、要るパッケージも入れます。

npx shadcn@latest add dialog          # 1つ足す
npx shadcn@latest add label select    # まとめて足す
npx shadcn@latest add                 # 一覧から選ぶ

2026年10月22日時点の shadcn の CLI は 4.22.1（npm）です。add には部品の名前のほか、URL やローカルのパスも渡せます。

Vercelへのデプロイ（Publish・Git・vercel CLI）

この節では、v0 のコードを Vercel に公開する3つの方法と、使い分けが分かります。

方法	手順	特徴
v0 の Publish	チャットの上の Publish → Publish Changes	いちばん手数が少ない。v0 の中で完結
Git 連携	GitHub に push → Vercel が自動でビルド	プルリクエストごとにプレビューの URL
vercel CLI	vercel でプレビュー、vercel --prod で本番	手元のフォルダから直接。CI からも使える

v0 の公式ドキュメントでは、プレビューのデプロイは作業用のブランチから作られて本番の URL を変えず、本番のデプロイはプロジェクトのドメインで配信されます。公開時のビルドが失敗すると、Fix with v0・Fix Build でエラーのログを v0 に渡して直させられます（有料プランでは、手を加えていないコードの修正は1日に決まった回数まで無料。回数はドキュメントの表に空欄でした）。

vercel CLI の確かめ

Vercel CLI 65.1.0 を npm で入れて、ヘルプを見ました（Basic の一部）。

Vercel CLI 65.1.0

  ▲ vercel [options] <command | path>

  Commands:

    Basic

      deploy                     Deploy your project to Vercel (default)
      build                      Build the project
      dev                        Starts the `vercel dev` server
      env                        Interact with Environment Variables for a
                                 Project
      link                       Link a local directory to a Vercel project
      login                      Sign in to your Vercel account
      pull                       Pull Environment Variables and project settings
                                 into .vercel
      rollback                   Quickly revert back to a previous deployment

vercel deploy --help にある主なオプションです。

オプション	意味
--prod	本番へデプロイ（--environment production の短縮）
--prebuilt	vercel build で作った成果物をそのままデプロイ
--env KEY=VALUE	実行時の環境変数
--build-env KEY=VALUE	ビルド時の環境変数
--logs	ビルドのログを表示
--temporary	ログインせずに一時的なデプロイを作る（後でアカウントに取り込める）
-y・--yes	確認をすべて既定の答えで進める

ログインしていない状態で vercel deploy --yes を実行すると、何も送らずに次のエラーで止まりました。

Vercel CLI 65.1.0 (Node.js 22.22.2)
Error: No existing credentials found. Run `vercel deploy --temporary` to create a temporary deployment you can claim later, or `vercel login` to log in.
Learn More: https://err.sh/vercel/no-credentials-found

vercel login でログインするか、CI では --token でトークンを渡します。.gitignore には create-next-app が最初から .vercel を入れているので、vercel link で作られる .vercel/ はコミットされません。Vercel 以外の公開先との違いは、関連記事「Netlifyとは｜使い方・料金・デプロイ方法とエラー対処を実例で」で扱っています。

公開する前のチェックリスト

• 1手元で npm run build が通るか型のエラーやモジュールの抜けは、公開時のビルドでも同じように止まる
• 2API キーをコードに書いていないかSettings → Environment Variables か Vercel の環境変数に入れる。.env* は .gitignore 済み
• 3公開範囲を決めたかPublish の画面で選ぶ。試作は Vercel Authentication などで閉じられる
• 4商用なら Vercel のプランを確かめたかHobby は個人の非商用に限られる
• 5生成されたコードを人が読んだか入力の検証・認証・権限の扱いは、動いても正しいとは限らない

v0のコードでよく出るエラーと直し方

この節では、v0 のコードを手元に持ってきたときに出やすいエラーの原文と、直し方が分かります。どれも上のプロジェクトでわざと起こした実物です。

エラー（原文の要部）	原因	直し方
Module not found: Can't resolve 'lucide-react'	使っているパッケージが入っていない	npm install lucide-react
Module not found: Can't resolve '@/components/ui/label'	使っている shadcn/ui の部品のファイルが無い	npx shadcn@latest add label
You're importing a module that depends on useState into a React Server Component module.	"use client" が無い	ファイルの1行目に "use client"
Type '"primary"' is not assignable to type ...	Button に無い variant を書いた	6種類から選ぶか cva に足す
Failed to fetch Geist from Google Fonts.	ビルド時に fonts.googleapis.com に届かない	geist パッケージか next/font/local
Request to https://ui.shadcn.com/init?... failed	shadcn の CLI がレジストリに届かない	通信の経路を確かめる。届かないなら手動で置く
No existing credentials found.	vercel CLI にログインしていない	vercel login か --token

lucide-react が無い（Module not found）

v0 のコードはアイコンに lucide-react を使うことが多く、ファイルだけを既存のプロジェクトにコピーすると、パッケージが入っていません。

Error: Turbopack build failed with 1 error:
./components/signup-form.tsx:4:1
Error: Module not found: Can't resolve 'lucide-react'
  2 |
  3 | import { useState } from "react"
> 4 | import { Send } from "lucide-react"
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

import しただけで使っていないときは、ビルドは進み、型検査で次のエラーになりました。

components/signup-form.tsx(4,22): error TS2307: Cannot find module 'lucide-react' or its corresponding type declarations.
Failed to type check.

shadcn/ui の部品が無い

Error: Turbopack build failed with 1 error:
./components/signup-form.tsx:7:1
Error: Module not found: Can't resolve '@/components/ui/label'
   5 | import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
   6 | import { Input } from "@/components/ui/input"
>  7 | import { Label } from "@/components/ui/label"
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Import map: aliased to relative './components/ui/label' inside of [project]/

@/ は tsconfig.json の "@/*": ["./*"] で、プロジェクトの直下を指します。最後の行の「./components/ui/label に置き換えた」のとおり、そのファイルが無いという意味です。npx shadcn@latest add label で足すか、v0 からそのファイルも持ってきます。

"use client" が無い

useState などを使うファイルの先頭の "use client" が抜けると、次のエラーになりました。

Error: Turbopack build failed with 1 error:
./components/signup-form.tsx:2:10
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client

App Router では、ファイルは既定でサーバーで動く（サーバーコンポーネント）ので、状態・イベント・ブラウザの機能を使うファイルにだけ "use client" を書きます。

variant に無い値（型のエラー）

Button に variant="primary" と書くと、コンパイルは通り、型検査で止まりました。

components/signup-form.tsx(41,33): error TS2322: Type '"primary"' is not assignable to type '"link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined'.
Failed to type check.

エラー文に書ける値の一覧が出ています。default に直すか、button.tsx の variants.variant に primary を足します。

Google Fonts に届かない（next/font/google）

create-next-app の既定の layout.tsx は next/font/google で Geist を読み込み、ビルドのときに fonts.googleapis.com からフォントを取ってきます。社内のプロキシの内側や、外へ出られない CI でビルドすると、次のエラーで止まりました。

> Build error occurred
Error: Turbopack build failed with 2 errors:
[next]/internal/font/google/geist_a71539c9.module.css
Error: next/font: error:
Failed to fetch Geist from Google Fonts.
If you are offline or behind a proxy, self-host the font with next/font/local, or set HTTP_PROXY/HTTPS_PROXY so Next.js can reach fonts.googleapis.com.

エラー文のとおり、プロキシの設定でたどり着けるようにするか、フォントを自分で持ちます。この記事のプロジェクトでは、Vercel の geist パッケージ（中身は next/font/local でフォントのファイルを読む形）に替えて、ビルドが通りました。

npm install geist

import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"

shadcn の CLI がレジストリに届かない

shadcn の CLI は、init や add のときに ui.shadcn.com のレジストリから部品の中身を取ってきます。そこへの通信が通らないと、次のエラーになりました。

Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Request to https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=geist&rtl=false&menuAccent=subtle&menuColor=default&radius=default&track=1 failed, reason: Request was cancelled.

会社のネットワークでは、ui.shadcn.com への通信が許可されているかを確かめます。shadcn/ui の公式ドキュメントには、CLI を使わずに部品のソースを自分で置く手順（Manual installation）もあります。

Next.js のエラーの調べ方

ビルドのエラーは、ファイル名・行・列（./components/signup-form.tsx:7:1）と、該当の行に ^ の印が付いて出ます。まず印の行を見て、次の順に確かめると早く見つかります。

v0 の画面の中では、公開のビルドで失敗したときに Fix with v0 でログを渡して直させられます。

v0のAPI（Platform API・Model API）の呼び方

この節では、v0 を自分のプログラムから呼ぶ2つの API と、送られるリクエストの形が分かります。

API	何をするか	呼び方
v0 Platform API	チャットの作成・メッセージ・プロジェクト・デプロイを操作	v0-sdk（npm）、REST は https://api.v0.dev/v1/
v0 Model API（ベータ）	v0 のモデルを OpenAI 互換の形で呼ぶ	POST https://api.v0.dev/v1/chat/completions

API キーは v0 の設定（v0.app/settings/keys）で作り、SDK は環境変数 V0_API_KEY を読みます。Platform API の公式ドキュメントにある最小の例です。

npm install v0-sdk   # 2026年10月22日時点の最新は 0.16.7

import { v0 } from 'v0-sdk'

const chats = await v0.chats.find()

v0.chats.create() は新しいチャットを作って最初のメッセージからコードを作り（REST の POST /v1/chats）、v0.chats.init() は手元のファイルからチャットを始めます。ドキュメントの上限は、1つのチャットでメッセージ1万件・ファイル1,000個・1ファイル3MB、1日あたり API リクエスト1万回・チャットのメッセージ1,000件・デプロイ100回などです。

Model API は、公式ドキュメントでは使える条件が「Premium か Team のプランで、使った分の課金を有効にしたとき」と書かれたベータ版です。モデルは v0-1.5-md（日常の作業と UI の生成。入力12万8千トークン）・v0-1.5-lg（推論の要る作業。入力51万2千トークン）・v0-1.0-md（以前のモデル）で、出力はどれも最大6万4千トークンです。

擬似サーバーに送ったリクエストの実物

本物の v0 の代わりに、手元のポート 31702 で動く擬似サーバー（Python、OpenAI 互換の応答を返す）を立て、ドキュメントの curl の例と、AI SDK の @ai-sdk/vercel の例を、送り先だけ変えて送りました。

curl http://127.0.0.1:31702/v1/chat/completions \
  -H "Authorization: Bearer $V0_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"model": "v0-1.5-md", "messages": [{"role": "user", "content": "Create a Next.js AI chatbot"}]}'

// gen.mjs（本物に送るときは baseURL を書かない。既定は https://api.v0.dev/v1）
import { generateText } from 'ai'
import { createVercel } from '@ai-sdk/vercel'

const vercel = createVercel({ baseURL: 'http://127.0.0.1:31702/v1', apiKey: process.env.V0_API_KEY })
const { text, usage } = await generateText({
  model: vercel('v0-1.5-md'),
  prompt: 'shadcn/ui の Card で料金表を作って',
})
console.log('text:', text)
console.log('usage:', JSON.stringify(usage))

擬似サーバーに届いた中身です。

--> POST /v1/chat/completions
    authorization: Bearer v0-test-key
    content-type: application/json
    user-agent: curl/8.5.0
    body: {"model": "v0-1.5-md", "messages": [{"role": "user", "content": "Create a Next.js AI chatbot"}]}
--> POST /v1/chat/completions
    authorization: Bearer v0-test-key
    content-type: application/json
    user-agent: ai/7.0.148 ai-sdk/provider-utils/5.0.27 runtime/node.js/22
    body: {"model":"v0-1.5-md","messages":[{"role":"user","content":"shadcn/ui の Card で料金表を作って"}]}

AI SDK の prompt は、OpenAI と同じ messages の形（role: "user"）に変えて送られました。 @ai-sdk/vercel 3.0.30 の中を見ると、既定の送り先は https://api.v0.dev/v1 でした。AI SDK 側の戻り値の usage です。

text: （擬似サーバーの応答）
usage: {"inputTokens":21,"inputTokenDetails":{"noCacheTokens":21,"cacheReadTokens":0},"outputTokens":9,"outputTokenDetails":{"textTokens":9,"reasoningTokens":0},"totalTokens":30,"raw":{"prompt_tokens":21,"completion_tokens":9,"total_tokens":30}}

擬似サーバーが 401 を返すようにして、違うキーで送ると、AI SDK は次の例外を投げました（要部）。擬似サーバーに届いたのは1回で、401 は送り直されませんでした。

APICallError [AI_APICallError]: Invalid API key
  statusCode: 401,
  responseBody: '{"error": {"message": "Invalid API key", "type": "unauthorized"}}',

AI SDK の generateText・streamText の使い方は、関連記事「Vercel AI SDK入門｜generateText・streamText」で扱っています。

v0の商用利用・データの学習・注意点

この節では、作ったものを仕事で使うときに確かめることが分かります。

項目	公式ドキュメント・料金ページの記載（2026年10月22日時点）
コードの権利	Vercel は、プロンプトをもとに作られたコードを所有しない
商用利用	出力は他の人の出力や第三者の知的財産と似ることがあり、不完全・誤りを含むことがある。評価は利用者の責任
学習への利用	既定では、プロンプトや内容をモデルの入力として使うことがある。Vercel の設定でオプトアウトしたチームと Enterprise は使われない
プランの差	Business は学習への利用が既定でオフ、Enterprise は学習に使わない
公開のホスティング	Vercel の Hobby は個人の非商用だけ。商用は Pro 以上

会社の情報を入れる前に、使うプランの学習の扱いと、社内の決まりを確かめます。 生成された画像・文章・コードが他者の著作物に似ていないかの確認も、利用者の側の作業です。アカウントの削除は、一度確定すると止められず、同じメールアドレスで登録し直すには7日待つと公式ドキュメントにあります。

v0とBolt・Lovable・Cursorの違い

この節では、似たサービスとの違いを、公式の情報だけで比べられます。

各社の公式の料金ページ・ドキュメントで確かめた事実です（2026年10月22日時点・税抜き）。

サービス	形	主に作るもの（公式の記載）	公開・連携	料金（月額）
v0	ブラウザ、iOS アプリ	Next.js・React・TypeScript・Tailwind CSS・shadcn/ui	Vercel へ Publish、GitHub 連携	Free 0ドル（1日7メッセージ）、Plus 30ドル／ユーザー
Bolt.new	ブラウザ	JavaScript の Web アプリ（バックエンドは Node.js）	Bolt Cloud で公開・DB、Supabase、Expo でモバイル	Free 0ドル（月100万トークン）、Pro 18ドル（年払い）
Lovable	ブラウザ	Vite と React のアプリ	GitHub 連携、Lovable Cloud	Free 0ドル（1日5クレジット・月30まで）、Pro 25ドル〜
Cursor	エディタと CLI	手元のコードを Agent で書く・直す	料金表の Premium に code hosting の記載	Free 0ドル、Plus 8ドル（The X Subscription の一部）

flowchart TD
    Q[何から始めるか] -->|新しい画面・アプリ| W{構成を決めたいか}
    Q -->|手元の既存のコード| C[エディタの AI<br>Cursor など]
    W -->|Next.js と shadcn/ui| V[v0]
    W -->|任せたい| B[Bolt・Lovable など]

状況	合う選択肢の目安	理由
Next.js で作り、Vercel で公開する	v0	出力の構成と公開先が同じ会社の組み合わせ
デザイナーの Figma から画面を起こす	v0（有料プラン）	Import from Figma がある
手元の大きなリポジトリを直す	Cursor などのエディタの AI	手元のコード全体を読んで直す使い方
ブラウザだけで DB つきのアプリを完結させたい	Bolt・Lovable・v0	どれも DB の連携を持つ。プランと構成で選ぶ
v0 の画面を、手元で Claude Code などで育てる	v0 → GitHub → 手元	GitHub 連携で両方から直せる

Cursor の設定と使い方は、関連記事「Cursor 使い方｜Cursor Rulesの書き方・ショートカット・雛形」で扱っています。

よくある質問

Q. v0 の読み方は？ A. 日本語では「ブイゼロ」と呼ばれることが多いです。公式ドキュメントに読み方の記載はありません。

Q. v0 は無料で使えますか？ A. 使えます。2026年10月22日時点の Free プランは0ドルで、1日7メッセージまで、新規は1回限りの5ドル分のクレジットがあります。Vercel への公開・Design Mode・GitHub 同期も Free に含まれます。

Q. v0 は日本語で使えますか？ A. プロンプトは日本語で書けます（公式 FAQ は「好きな言語で書ける」）。iOS アプリの対応言語の表示は英語だけです。

Q. v0 で作ったものは商用利用できますか？ A. 公式 FAQ では、Vercel は生成されたコードを所有せず、出力の評価は利用者の責任とされています。Vercel で公開するなら、Hobby プランは個人の非商用に限られるので、商用は Pro 以上にします。

Q. v0.dev と v0.app の違いは？ A. 同じサービスで、今は v0.app で提供されています。Vercel のコミュニティでは 2025年8月11日に「v0.dev is now v0.app」の発表の回がありました。

Q. v0 のコードをダウンロードしてローカルで動かすには？ A. GitHub 連携でリポジトリを作って clone するか、ZIP をダウンロードして展開し、npm install → npm run dev です。Node.js は 20.9.0 以上（Next.js 16.4.2）が要ります。「ローカルで動かす手順」の節に実際の出力があります。

Q. v0 のクレジットが無くなるとどうなりますか？ A. 生成が止まります。有料プランは追加で買え、使い残した月のクレジットは翌月に繰り越して65日で失効します。

Q. v0 に入力した内容は学習に使われますか？ A. 既定では使われることがあります。Vercel の設定でオプトアウトでき、Business は既定でオフ、Enterprise は学習に使いません。

Q. v0 で画像やスライドは作れますか？ A. 画像の生成と編集は、公式ドキュメント「Pricing」に v0 のクレジットを使う作業として記載があります。スライド専用の機能の記載は無く、作るときは Web ページ（スライド風の画面）として頼む形になります。

Q. v0 のスマホアプリはありますか？ A. App Store に Vercel の「v0」があり、無料（アプリ内課金あり）で、iOS 26.0 以上が要ります（2026年10月22日時点の版は 0.0.39）。

Q. v0 で Vue や Svelte のコードは作れますか？ A. 公式ドキュメントが挙げる技術は Next.js・React・TypeScript・Tailwind CSS・shadcn/ui で、Vue と Svelte の記載はありません。

Q. v0 の API はありますか？ A. あります。v0 Platform API（v0-sdk）と、OpenAI 互換の Model API（ベータ）です。「v0のAPI」の節に、送られるリクエストの実物があります。

Q. v0 と Vercel の違いは？ A. v0 はコードを作る AI、Vercel はそのコードを公開して動かすホスティングです。料金も別で、v0 で作ったものを Publish すると Vercel のプロジェクトになります。

まとめ

• v0 は、文章・画像・Figma から Next.js・React・TypeScript・Tailwind CSS・shadcn/ui のコードを作る Vercel の AI。v0.app で使い、Publish で Vercel に公開できる。
• 2026年10月22日時点の料金は、Free 0ドル（1日7メッセージ・新規は1回限りの5ドル分）、Plus 月30ドル／ユーザー、Business 月100ドル／ユーザー。クレジットはトークン数×モデルの単価で減り、チャットの履歴やファイルも入力に数える。
• プロンプトは「画面の中身・使われ方・条件」の3つを書き、見た目の微調整は Design Mode で行う。
• コードは shadcn/ui の部品のソースが components/ui/ に入り、components.json が置き場所を決める。手元では npm install → npm run dev → npm run build で動き、実験では10.1秒でビルドできた。
• 手元で出やすいエラーは、パッケージ・部品の抜け、"use client" の抜け、無い variant、ビルド時の Google Fonts への通信。どれもエラー文に直す場所が書かれている。
• 商用で使うときは、学習の扱い（Business・Enterprise）と、Vercel の Hobby が非商用だけであることを確かめる。

参考・出典

確認日はいずれも 2026年10月22日です。

• v0「Documentation」：https://v0.app/docs
• v0「Pricing」（料金ページ）：https://v0.app/pricing
• v0 Docs「Pricing」：https://v0.app/docs/pricing
• v0 Docs「Quickstart」：https://v0.app/docs/quickstart
• v0 Docs「FAQs」：https://v0.app/docs/faqs
• v0 Docs「Text Prompting」：https://v0.app/docs/text-prompting
• v0 Docs「Design mode」：https://v0.app/docs/design-mode
• v0 Docs「Code viewer」：https://v0.app/docs/code-editing
• v0 Docs「GitHub」：https://v0.app/docs/github
• v0 Docs「Deployments」：https://v0.app/docs/deployments
• v0 Docs「Databases」：https://v0.app/docs/databases
• v0 Docs「Figma」：https://v0.app/docs/figma
• v0 Docs「AI models」：https://v0.app/docs/ai-models
• v0 Docs「Account」：https://v0.app/docs/account
• v0 Docs「Platform API」：https://v0.app/docs/api/platform/overview
• v0 Docs「Model API」：https://v0.app/docs/api/model
• Vercel Blog「How to prompt v0」：https://vercel.com/blog/how-to-prompt-v0
• Vercel Community「v0.dev is now v0.app」：https://community.vercel.com/live/community-session-v0-dev-is-now-v0-app/18060
• Vercel Community「v0 Add to Codebase feature missing or changed to shadcn CLI」：https://community.vercel.com/t/v0-add-to-codebase-feature-missing-or-changed-to-shadcn-cli/34643
• Vercel Docs「Hobby Plan」：https://vercel.com/docs/plans/hobby
• App Store「v0」：https://apps.apple.com/jp/app/id6745097949
• shadcn/ui「CLI」：https://ui.shadcn.com/docs/cli
• shadcn/ui「Manual Installation」：https://ui.shadcn.com/docs/installation/manual
• shadcn-ui/ui（GitHub）：https://github.com/shadcn-ui/ui
• npm「next」：https://www.npmjs.com/package/next
• npm「v0-sdk」：https://www.npmjs.com/package/v0-sdk
• npm「@ai-sdk/vercel」：https://www.npmjs.com/package/@ai-sdk/vercel
• npm「geist」：https://www.npmjs.com/package/geist
• Bolt「Pricing」：https://bolt.new/pricing
• Bolt Support「Supported technologies」：https://support.bolt.new/building/supported-technologies
• Lovable Docs「Subscription plans」：https://docs.lovable.dev/introduction/subscription-plans
• Lovable Docs「Plans and credits」：https://docs.lovable.dev/introduction/plans-and-credits
• Lovable Docs「FAQ」：https://docs.lovable.dev/faq
• Cursor Docs「Pricing」：https://cursor.com/docs/account/pricing

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。