社内で話題に上がったので、 Vercel のジェネレーティブ UI サービス v0 でコンポーネントを生成してみる
今回の環境
TL;DR
1. モダンなターミナルコンポーネントを生成する
2.create-next-app
を実行させる
3.不要な要素を削除する
4.生成されたコードを確認する
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.ブラウザで確認する