Tech Blog

v0 ジェネレーティブ UI を試してみる

Cover Image for v0 ジェネレーティブ UI を試してみる

社内で話題に上がったので、 Vercel のジェネレーティブ UI サービス v0 でコンポーネントを生成してみる

今回の環境

TL;DR

1. モダンなターミナルコンポーネントを生成する

v0 by Vercel

2.create-next-app を実行させる

A modern terminal emulator. | A v0.dev template - v0

3.不要な要素を削除する

A modern terminal emulator. | A v0.dev template - v0

4.生成されたコードを確認する

A modern terminal emulator. | A v0.dev template - v0

5.Next.js に取り込む

npx create-next-app@latest my-app --typescript --tailwind
--eslint
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y)
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)?
   … No
Creating a new Next.js app in ./my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 333 packages, and audited 334 packages in 7s

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app at ./my-app

cd my-app
npx v0@latest init
Need to install the following packages:
v0@0.0.9
Ok to proceed? (y)

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed. You can now
starting adding components.

npx v0 add [id]
Need to install the following packages:
v0@0.0.9
Ok to proceed? (y)
✔ What should we name the component? … Terminal
npx next dev
✔ Done.
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

 ✓ Ready in 2.5s
 ○ Compiling / ...
 ✓ Compiled / in 1397ms (529 modules)
 ✓ Compiled in 339ms (254 modules)
 ✓ Compiled /favicon.ico in 304ms (543 modules)```

  // src/app/page.tsx
  import Image from 'next/image'
+ import { Terminal } from '@/components/terminal'

  export default function Home() {
    return (
      <main className="flex min-h-screen flex-col items-center justify-between ...
  ...
          </div>
        </div>

+       <div className="mb-8 lg:mb-0">
+         <Terminal />
+       </div>
+
        <div className="relative flex place-items-center before:absolute befor ...
          <Image
            className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:i ...
            src="/next.svg"
  ...

6.ブラウザで確認する

Create Next App

参考にしたページ