A new service offered by Vercel is called v0. By using this service, you can easily create web component development using a generative AI. In this article, we will introduce the standard procedures for using v0.
Content Update
Please check the latest information on the following page
Introduction to v0
Vercel is a company that provides hosting services for a variety of applications. Vercel also offers Next.js, which is a useful tool for actually building websites.
This time, we will introduce v0, a service that creates Web components among the generated AI.
When you access the site, you will see a simple page where you can enter commands as shown below.
About Rate Plans
A free plan has been set up for the use of v0. This makes it easy for you to try it out if you are not sure if you can use it. If you are not sure if you can use it, you can easily try it out. I will use the free plan this time, but what is the billing structure?
First, credits are consumed to generate the UI. Up to 200 credits per month can be used for free. The paid course is Premium, which includes the creation of themes and other services.
For more information on the detailed fee structure and the different features available, please refer to the following websites
Generate Components
Now let's actually create a component using v0. This time, I used the following prompt (executed in Japanese)
ブログの記事が縦に並ぶ
Three designs are then generated as shown below.
The generated UI is public in the free version, so the results can be viewed at the following URL.
Using components in Next.js
Preparation of Next.js
We would like to use the created component in Next.js as it is. This time, we will prepare a vanilla Next.js to display the component.
First, create Next.js.
PowerShell
npx create-next-appWhen creating, typescript and eslint must be enabled. In this case, we used the following configuration.
In order to make Next.js nothing but Next.js, we will remove the sample data. As for the stylesheet src\app\globals.css, delete all but the first three lines, and for the page src\app\page.tsx, only the following code will be used.
TypeScript
export default function Home() {
return (
<main>
<h1>Next.js Sample</h1>
</main>
);
}Next.js is now ready.
To make v0 available, the following commands are then executed to initialize it.
PowerShell
npx v0@latest initAfter executing the above command, the following files will be added and updated
- components.json
- src\app\globals.css
- src\lib\utils.ts
- package-lock.json
- package.json
- tailwind.config.ts
The Next.js side is now ready. The modified code can be seen below.
コンポーネントを追加する
This time, we will make the second design available for use. Select this design and click on the Code button in the upper right corner. The following screen will appear.
As a quick workaround, execute the command in the upper right corner.
PowerShell
npx v0 add 0eoBKQpjmc5When executed, the component is successfully generated, but also shows an error.
This error occurs because the public path is not prepared. Please create a new folder and run the command again. As a result, two files are generated without any error message.
Apply the created component to src\app\page.tsx.
TypeScript
import { BlogHome } from "@/components/component/blog-home";
export default function Home() {
return (
<main>
<BlogHome />
</main>
);
}Now that the component is available on the page, check its operation locally with the following command.
PowerShell
npm run devRun it, and you will see the component working correctly as shown below.
Generate from image
This time we generated from a simple prompt, but is it possible to generate from an image? So this time we will use the XM Cloud documentation page.
First, go to https://doc.sitecore.com/xmc and make a screenshot.
This is done by selecting the image on the v0 home page and executing the generation.
The results are as follows
It is used as a free version and can be accessed by Public. You can also check the other two designs.
For reference, 15 credits were consumed to generate using this image.
As in the first time, this is added with the following command
PowerShell
npx v0 add GlGKNnb4c11The name of the component is added as SitecoreDoc. Generate a page that uses this component in src\app\sitecore\page.tsx. The code only changes the name of the component and the file.
TypeScript
import { SitecoreDoc } from "@/components/component/sitecore-doc";
export default function Home() {
return (
<main>
<SitecoreDoc />
</main>
);
}The result is as follows
It beautifully recreates the atmosphere of the page.
Finally, let's build the code we have developed so far.
PowerShell
npm run buildThe following error message is then displayed.
This is where the icon is used, and the error is because the props type is not specified. Please change ChevronDownIcon and SearchIcon in the two places and in the form described in this code.
TypeScript
function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {By changing the above two lines, the build also went through. The URL of the page that was extracted to Vercel is also included for reference.
Summary
In this article, I have shown how to use v0 to generate sample components for use in Next.js. It is especially useful to be able to generate them based on images. The code we created this time is shared in the following repository on GitHub.
Related document
- v0 Documentation - Integrating Generated Code into Your Next.js App