Tailwind Logo

Generate Web design from text using v0 ( v0.dev )

Related Technology

Published: 2024-09-17

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.

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.

v001.png

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.

v002.png
v003.png
v004.png

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-app

When creating, typescript and eslint must be enabled. In this case, we used the following configuration.

v005.png

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 init

After 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.

v006.png

As a quick workaround, execute the command in the upper right corner.

PowerShell 
npx v0 add 0eoBKQpjmc5

When executed, the component is successfully generated, but also shows an error.

v007.png

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 dev

Run it, and you will see the component working correctly as shown below.

v008.png

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.

v009.png

This is done by selecting the image on the v0 home page and executing the generation.

v010.png

The results are as follows

v011.png

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 GlGKNnb4c11

The 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

v012.png

It beautifully recreates the atmosphere of the page.

Finally, let's build the code we have developed so far.

PowerShell 
npm run build

The following error message is then displayed.

v013.png

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

Tags