v0.dev生成コードでデフォルト画面しか表示されない問題の解決

導入

フロントエンドの初学者として、実際に作りながら理解していく学習方法を取っています。
今回は v0.dev で生成したコードを
npxコマンドを使ってローカルで動かしてみた際に、
期待していた画面ではなくデフォルト画面しか表示されなかった問題について記録します。

事象

npm run dev でローカルサーバーを起動し、
http://localhost:3000/ にアクセスしたところ、
以下のようにデフォルトページが表示されました。

原因

直接原因

page.tsx が、プロジェクト生成時のデフォルトのままになっていることが原因でした。

根本原因

なぜこのような状況になったのか、
再度コマンドを実行して確認してみました。

コマンド実行時にpage.tsxを上書きするかを聞かれる

$ npx shadcn@latest add "https://v0.dev/chat/b/b_xxxxxxxxxxxxxx?token=xxxxxxx"
√ What is your project named? ... kakei-lite
✔ Creating a new Next.js project.
√ Which color would you like to use as the base color? » Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Installing dependencies.
? The file page.tsx already exists. Would you like to overwrite? » (y/N) # この部分

ここで No を選択していたことが原因でした。

処理の流れ：

npxによるプロジェクト生成でデフォルトのpage.tsxが生成される
v0が生成したコードで上書きする必要がある

この流れを理解できていませんでした。

解決方法

上書きの確認で Yes を選択することで、v0で生成されたコードが正しく反映されます。

まとめ

手順を一つ一つ確認することを怠ったことが原因でした。
ただ、うまくいかないことで新たな知識を得られるので、「とりあえずやってみる」ことの学習効果を実感できています。

今後は、特にファイルの上書きに関する確認メッセージには注意深く対応していきたいと思います。