v0 + Cloudflare Pagesで紹介サイトを作ってみた

「v0すごい」とは聞いていたものの、なかなか触れる機会がなかったのですが、今回この記事の内容をサイト化したくなり、試してみました。

以下が、実際に打ち込んだプロンプトの一例です：

1. NextjsでシンプルなデザインのECサイトを作ってください
2. featuredProductsにURL要素を追加して、ボタンを押したらそのURLを開くようにしたい。
3. 詳細を見るボタンの右にAmazonリンクボタンを追加してください
4. Uncaught Error: Parse error ... に対処する修正コードを求める
5. トップページのFeaturedProductsの下に通常商品を紹介する欄を追加したい
6. ヘッダーの「SimpleShop」の左に若干のスペースを空ける
7. Productsページにもヘッダーを追加してほしい
8. ヘッダーにaboutページを追加し、aboutにはサイトのコンセプトを記載する
9. トップページの「Welcome to SimpleShop」と「Featured Products」のスペースを減らしてほしい

その後、右上の「Download Code」からコードをダウンロードし、 GitHubにアップロードして、手動で細かい調整を行いました。

Cloudflare Pagesにデプロイする際には、以下のような設定も必要でした：

• next.config.ts に output: "export" を追加
• images に関する設定を追加

これらの手順は、ネット上に解説してくれている方が多数いるので、調べながら対応できました。

そして、完成したサイトがこちらです： 👉 IoT機器探しに詰まったら見てほしいサイト

すべて無料でできたので、ぜひお試しください。