v0 by Vercelで作ったテンプレートファイルをmacローカルで実行

こんにちは、v0すごいのですが、そもそもファイルがtsxという形で生成されてよくわかりませんでした。
どうやらNext.jsというフレームワークで作られているようですが、時代に取り残されています。
今後は自社でも活用していきたいと考えています。

LLMを使ってプログラミングをする時には全体の一体感を出しながらの開発が大変です。
Pythonでもバックエンドに機械学習やLLMなどを直接接続する関係上、Pythonを使う機会が多いので、flaskをよく使います。
ただ、flaskでテンプレートを管理する時にはjinja2を使うのですが、パラメータをPythonのapp.pyから都度渡す必要があり、その一貫性や処理に困ることが多いです。

一つの解決策としてフロントエンドとバックエンドを完全に切り離すことでより本格的な開発ができるのですが、踏ん切りつきませんでしたが、こうしたフロントエンドをきちんと作ってくれるサービスが出てくるとAPIで切り離したほうが楽な気がしてきました。

ということで、v0 by Vercelを使ってみます。

v0 by Vercel
https://v0.dev/

フロントはv0で、適当にデザインをしました。

blueqatのRAGにはランディングページがなかったので、それを作ってもらいました。これをみてみるとtsxという見慣れないファイル拡張子になっています。html/css/jsをスクラッチで書いてきたおじさんなのでフレームワークのお作法がわかりませんので調べてみます。

v0 is a generative user interface system by Vercel powered by AI. It generates copy-and-paste friendly React code based on shadcn/ui and Tailwind CSS that people can use in their projects.

とありました。shadcn/uiとTailwind CSSを使っているとあります。そもそもNext.jsとはなんですかね。

Next.jsは、Reactをベースにしたオープンソースのフレームワークで、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、APIルート、コード分割、ルーティングなどの高度な機能を提供します。開発者がReactでのWebアプリケーション開発をより効率的に行えるように設計されており、フロントエンド開発者の間で非常に人気があります。

Next.jsは特に、パフォーマンスの向上やSEO対策に強みを持ち、ブログやマーケティングサイト、eコマースサイトなど、多様なウェブサイトやアプリケーションで利用されています。

Next.jsの主な特徴

サーバーサイドレンダリング (SSR)
- ページをサーバー側でレンダリングして、完全にレンダリングされたHTMLをクライアントに送信します。これにより、クライアント側でのJavaScript読み込み前でも、ユーザーはコンテンツを見ることができ、SEOや初期ロード時間の改善に寄与します。
静的サイト生成 (SSG)
- ビルド時に静的HTMLファイルを生成します。これにより、非常に高速でSEOフレンドリーな静的ウェブサイトが作成できます。ブログやマーケティングページに最適です。
クライアントサイドレンダリング (CSR)
- 従来のReactアプリと同じように、クライアント側でページをレンダリングできます。
自動ルーティング
- Next.jsは、pagesディレクトリ内のファイル名を基に、自動でルーティングを設定します。例えば、pages/index.tsxはルート (/) に対応し、pages/about.tsxは /about というURLに自動的にマッピングされます。
APIルート
- APIルートを使って、サーバーサイドでAPIエンドポイントを簡単に設定できます。pages/apiディレクトリ内にファイルを作成するだけでAPIを提供できます。
増分静的再生成 (ISR)
- Next.jsでは、既存の静的サイトにリアルタイムなデータを取り込み、必要に応じて更新できる「増分静的再生成」が可能です。これにより、静的サイトのパフォーマンスを維持しつつ、動的コンテンツも表示できます。
コード分割
- 必要なコードだけをロードする「コード分割」を自動的に行うため、初期ロード時間を短縮できます。ページ単位でコードを分割し、効率的なリソース管理が可能です。
Image Optimization
- Next.jsは、デフォルトで画像の最適化機能を提供しており、ページのパフォーマンス向上に寄与します。動的に画像を最適化し、必要なサイズや形式に変換することができます。
国際化 (i18n)
- 内蔵の国際化サポートを使用して、多言語対応サイトを簡単に構築できます。
TypeScriptサポート
- TypeScriptをネイティブでサポートしており、静的型付けによる安全性を活かして開発できます。

Next.jsの基本構造

Next.jsのプロジェクトは、通常以下のような構造になります。

my-next-app/
├── pages/
│   ├── index.tsx        # ルートページ (/)
│   ├── about.tsx        # /aboutページ
│   ├── api/
│   │   └── hello.ts     # APIルート (/api/hello)
├── public/              # 静的ファイル (画像など)
├── styles/              # CSSやSASSファイル
├── components/          # 再利用可能なReactコンポーネント
├── next.config.js       # Next.jsの設定ファイル
└── tsconfig.json        # TypeScript設定ファイル (TypeScriptを使用する場合)

pages/ディレクトリ: ここに配置されたファイルが自動的にルーティングされ、ページとして認識されます。
public/ディレクトリ: 静的ファイル（画像、フォントなど）を配置する場所。これらのファイルは、/public/のURLパスでアクセス可能です。
api/ディレクトリ: サーバーサイドでAPIエンドポイントを定義できる場所です。APIエンドポイントの実装に便利です。

Next.jsの利点

SEOに強い: サーバーサイドレンダリングや静的サイト生成をサポートしており、検索エンジンに最適化されたコンテンツを提供できます。
開発が高速: 自動ルーティングや、ビルトインのAPIルート、コード分割など、開発を効率化する機能が豊富です。
柔軟なレンダリング方式: SSR、SSG、ISRなど、アプリケーションの要件に応じたレンダリング方法を選択できます。
パフォーマンス最適化: 画像の最適化やコード分割が自動的に行われ、ページのパフォーマンスが向上します。

とあります。

つまりReactというフロントエンドのウェブサイト表示などに適したJavascriptのフレームワーク上にさらに作られたフレームワークで、そのNext.jsを使うと色々な機能を作れるということに。デザイン部分はCSSを利用しますが、今回はTailwind CSSを利用して、さらにそこにshadcn/uiを利用することで、制御しやすくアプリを高性能・ハイクオリティで作れるということのようです。

v0を使ってみました。
作り方は超簡単で、

「blueqat RAGに関するランディングページを作って、ログインボタンと登録ボタンをつけて」

と指示をするだけです。そうすると、

こんな感じになります。ファイルの拡張子は.tsxですが、普通にhtmlなどをしている限りはあまり馴染みありません。
どうやらNext.js環境をmacのローカルに構築すれば良いようです。

まずはmacにNext.js環境を構築するために、Node.jsの環境が必要のようです。ターミナルから下記を実行しました。

brew install node

次にNext.js環境をインストールするために下記のようにしました。

npm install next react react-dom

そしてプロジェクトを作ります。

npx create-next-app@latest my-next-app --typescript
cd my-next-app

これで自動的にフォルダやファイルが準備されます。

先ほどv0で作成したテンプレートは、この中で、

Appというフォルダのpage.tsxというところを入れ替えると動きます。

サーバーは、

npm run dev

で動きました。ただ、おそらくエラーが起きます。フロントエンドのCSSフレームワークとして、Tailwindなどを使っています。
特に、テンプレートの最上部に、

import Link from 'next/link'
import { Button } from "@/components/ui/button"

とあります。コンポーネントのボタンが読み込まれないとエラーになります。どうやらTailwindではなく、shadcn/uiというもののようです。

https://ui.shadcn.com/

まずはTailwindを導入します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

さらに、shadcn/uiをを設定する必要がありますが、npxでインストールできるようです。

npx shadcn@latest init

これで入ります。さらにこれだけでなく、ボタンを追加する必要がありました。

npx shadcn@latest add button

こんな感じでボタンを追加して、サーバーを先ほどのように、

npm run dev

すると、http://localhost:3000をブラウザで開くことにより、

のように、無事ウェブサイトが表示されました。

まとめますと、npmをインストール、nextjsやreactをインストールし、tailwindやshadcnをインストールするとようやく使えます。
.tsxの拡張子にビビりましたが、ちょっと覚えること多いですが、今回のv0の開発環境が固定されていますので、
それを用意してあげることで実現できそうで安心しました。

v0 by Vercelで作ったテンプレートファイルをmacローカルで実行

Yuichiro Minato

Next.jsの主な特徴

Next.jsの基本構造

Next.jsの利点