Vercel が提供している新しいサービスとして v0 というサービスがあります。このサービスを利用することで、簡単に Web のコンポーネント開発を生成 AI を利用して作っていくことができます。今回は、この v0 を利用する標準的な手続きを紹介していきます。
コンテンツ更新
以下のページで最新の情報を確認してください
v0 の紹介
Vercel は様々なアプリをホスティングすることができるサービスを提供している会社です。また、実際に Web サイト構築にあたって便利なツールとなる Next.js も提供しています。
今回紹介をするのは、生成 AI の中でも Web コンポーネントを作成してくれるサービスとなる v0 です。
サイトにアクセスをすると、以下のようにコマンドを入れるだけのシンプルなページが表示されます。
料金プランについて
v0 を利用するにあたって無料プランが設定されています。このため、使えるのかどうか？という感じであれば手軽にお試しをすることができます。今回は無料プランを使いますが、どういう課金体系になっているのでしょうか？
まず、UI を生成するにあたって credit が消費されます。毎月 200 credits までは無料で利用できるようになっています。有償のコースとしては Premium があり、このサービスであればテーマの作成などにも対応しています。
詳しい料金体系と利用できる機能の違いに関しては、以下のサイトを参照してください。
コンポーネントを生成する
それでは実際に v0 を利用してコンポーネントを作成します。今回は以下のプロンプトで実行しました（日本語で実行）
ブログの記事が縦に並ぶ
すると以下のように3つのデザインが生成されます。
なお、生成した UI に関しては無料版では Public という形になっているため、以下の URL で結果を確認することが可能です。
Next.js でコンポーネントを利用する
Next.js の準備
作成したコンポーネントをそのまま Next.js で利用したいと思います。今回はバニラな Next.js を用意してコンポーネントを表示する形です。
まず最初に Next.js を作成します。
PowerShell
npx create-next-app作成をする際には、typescript と eslint を有効にする必要があります。今回は以下のような設定で作成をしました。
何もない Next.js にするために、サンプルのデータを削除します。変更点としては、スタイルシート src\app\globals.css は最初の３行を残してすべて削除、またページ src\app\page.tsx に関しては以下のコードのみとします。
TypeScript
export default function Home() {
return (
<main>
<h1>Next.js Sample</h1>
</main>
);
}これで Next.js の準備が整いました。
続いて v0 を利用可能な形とするために、以下のコマンドを実行して初期化を行います。
PowerShell
npx v0@latest init上記のコマンドを実行すると、以下のファイルが追加、更新されます。
- components.json
- src\app\globals.css
- src\lib\utils.ts
- package-lock.json
- package.json
- tailwind.config.ts
これで Next.js 側の準備ができました。なお、変更されたコードは以下で確認ができます。
コンポーネントを追加する
今回は２つ目のデザインを使える使えるように、していきます。このデザインを選択して、右上にある Code のボタンをクリックします。すると以下の画面が表示されます。
手っ取り早く、右上にあるコマンドを実行します。
PowerShell
npx v0 add 0eoBKQpjmc5実行すると、コンポーネントの生成には成功していますが、エラーも表示されています。
これは public のパスが用意されていないため発生しているエラーとなります。フォルダを改めて作成をして、もう一度コマンドを実行してください。結果、エラーが表示されることもなく、２つのファイルが生成されました。
作成したコンポーネントを src\app\page.tsx に適用します。
TypeScript
import { BlogHome } from "@/components/component/blog-home";
export default function Home() {
return (
<main>
<BlogHome />
</main>
);
}コンポーネントをページで利用できるようにしたので、以下のコマンドでローカルで動作確認をします。
PowerShell
npm run dev実行する、以下のようにコンポーネントが正しく動作しているのが分かります。
画像から生成をする
今回は簡単なプロンプトから生成をしましたが、画像から生成をすることは可能でしょうか？そこで今回は XM Cloud のドキュメントのページを利用してみます。
まず、https://doc.sitecore.com/xmc にアクセスをしてスクリーンショットを作成します。
これを、v0 のトップページで画像を選択して、生成を実行します。
結果として以下のようになりました。
無料版として利用しているので、Public でアクセスできるようになっています。残り２つのデザインも確認ができます。
参考までに、この画像を利用して生成をする際には 15 credits が消費されました。
初回と同じく、これを以下のコマンドで追加します。
PowerShell
npx v0 add GlGKNnb4c11コンポーネントの名前は SitecoreDoc として追加しました。このコンポーネントを利用するページを src\app\sitecore\page.tsx に生成します。コードはコンポーネントの名前とファイルが変わっているだけです。
TypeScript
import { SitecoreDoc } from "@/components/component/sitecore-doc";
export default function Home() {
return (
<main>
<SitecoreDoc />
</main>
);
}結果として以下のようになります。
見事にページの雰囲気をそのまま再現できています。
最後にここまで進めたコードを build してみます。
PowerShell
npm run buildすると以下のようなエラーが表示されます。
これはアイコンを利用しているところで、props のタイプを指定していないためエラーになっています。このコードには２か所、記載されている形で、ChevronDownIcon と SearchIcon の変更をしてください。
TypeScript
function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {上記２行を変更することで build も通りました。
まとめ
今回は v0 を利用して Next.js で利用するコンポーネントのサンプルを生成する方法を紹介しました。特に、画像をもとに生成することができるのは便利ですね。
関連情報
- v0 Documentation - Integrating Generated Code into Your Next.js App