v0 (shadcn) で UI を作る

とりあえず新規で作る。
先に v0 側で適当に作っておく。

マーケットプレイスのようなサイトを作ろうと思います。大枠を考えてください。
...
アイテムの一覧ページのUIを作ってください。

右上の四角いアイコンを押すとコードに入れるリンクを取得できる。

新規プロジェクトを作って追加する。
Next.js 15 だとエラーが出たので、14 で指定する。

npx create-next-app@14
cd my-app
npx v0@latest init
npx shadcn@latest add ...

pages.tsx を書き換え

import { ItemList } from "@/components/item-list"

export default function Home() {
  return (
    <ItemList></ItemList>
  );
}

これで表示ができる。

他の AI サービスと違って結果をコピペする必要がないので、ここまででも十分使い勝手が良い。

nazo

複数ページを作りたい。

アイテムの詳細ページを作って、一覧ページから繊維するようにしてください。

何やらできたので再度 npx shadcn@latest add ... する。更新コマンドとかないの？
コンポーネント毎に打たないと取得できない。

インポートしたので詳細ページを作る

import { ItemDetailComponent } from "@/components/item-detail"

export default function Item() {
  return (
    <ItemDetailComponent></ItemDetailComponent>
  );
}

item-detail だけ ItemDetailComponent になったのが気になる。これも LLM 的な問題だが、コンポーネント名までちゃんと指示したほうがよさそう。

nazo

components.json で各種設定ができる。
自動生成と手動生成のコードが混ざるとだるいので、 v0/components/ か components/v0/ とかに分けておくと良さそう。
ただし生成されるコードは考慮してくれなく、 import { Button } from "@/components/ui/button" のように決め打ちで出てくる。
生成コードを触りたくないなら tsconfig.json で調整する必要がありそう。

nazo

npx v0@latest init で生成されたファイルは消すと戻せないかも

nazo

生成したコードを手で触ると上書きすると消える
当たり前ではあるけど触らない前提にするためにプロンプトで誘導する必要があるかも