🤖

Codex CLI × Next.jsで作るAIチャットボット構成解説

に公開
Next.js
React
TypeScript
Vercel
Gemini
tech

🧠 はじめに

この記事では、Codex CLI を使って構築した AIチャットボットデモサイト の技術スタックを解説します。

https://zenn.dev/yakimt/articles/ai-chat-poc-demo

使用技術は以下の通りです。

  • Next.js 16 (App Router) + TypeScript
  • React 19.2 / React DOM 19.2
  • Tailwind CSS 4 (@tailwindcss/postcss)
  • ESLint 9 + eslint-config-next
  • Vercel AI SDK (ai, @ai-sdk/react)
  • Google Gemini Provider (@ai-sdk/google)
  • Babel React Compiler (babel-plugin-react-compiler)

🧩 全体構成イメージ

[ユーザー]
   ↓
[Next.js + React] — (UI, 入力管理)
   ↓
[Vercel AI SDK] — (チャット状態・API通信)
   ↓
[Google Gemini Provider] — (AIモデル呼び出し)
   ↓
[Gemini API] — 応答生成

🚀 フロントエンド技術

1. Next.js 16 (App Router) + TypeScript

Next.jsは、ReactをベースにしたWebアプリフレームワークです。
App Router構成によって、ルーティングとデータ取得を統合的に管理できます。

TypeScriptを組み合わせることで、型安全な開発が可能になります。

// app/page.tsx
export default function ChatPage() {
  return <h1>Hello Chatbot</h1>;
}

💡 ポイント

  • App Routerにより、React Server Componentsが利用可能
  • APIエンドポイントを /app/api 配下に実装できる
  • TypeScriptで型チェックが可能（バグを早期検知）

2. React 19.2 / React DOM 19.2

UIを構築するためのライブラリです。
19系では React Compiler と連携した自動最適化が強化されています。

function Message({ text }: { text: string }) {
  return <p className="text-gray-800">{text}</p>;
}

💡 ポイント

  • コンポーネント指向の開発で再利用性が高い
  • Virtual DOMで高速描画
  • React Compilerにより再レンダリングが自動最適化される

3. Tailwind CSS 4 (@tailwindcss/postcss)

Tailwindは「ユーティリティクラス」でデザインを組み立てるCSSフレームワークです。

<button class="bg-blue-600 text-white px-4 py-2 rounded">
  送信
</button>

💡 ポイント

  • デザインガイドラインを統一できる
  • PostCSS連携で自動ビルド・最適化
  • bg-, text-, px- などの直感的クラスで即デザイン

🧹 コード品質管理

4. ESLint 9 + eslint-config-next

ESLintは、構文エラーやコードスタイルの不一致を自動で検出するツールです。
eslint-config-next を利用するとNext.js特有のルールが適用されます。

npx eslint src --fix

💡 検出例

  • 未使用の変数
  • import順序の不整合
  • console.logの残存

🤖 AI連携部分

5. Vercel AI SDK (ai, @ai-sdk/react)

Vercel公式のAI連携SDKです。
Reactアプリでチャット状態管理＋AIモデル通信を簡単に実装できます。

import { useChat } from '@ai-sdk/react';

function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={handleInputChange} />
      {messages.map(m => <p key={m.id}>{m.text}</p>)}
    </form>
  );
}

💡 特徴

  • ストリーミング応答に対応（Typing風アニメーションが簡単）
  • Gemini, OpenAI, Anthropicなど複数モデルをサポート
  • 状態管理とAPI呼び出しが統合されておりシンプル

6. Google Gemini Provider (@ai-sdk/google)

Google GeminiモデルをVercel AI SDKから利用するためのプロバイダです。

import { createGoogleGenerativeModel } from '@ai-sdk/google';

const model = createGoogleGenerativeModel({
  model: 'gemini-1.5-flash',
});

💡 ポイント

  • Gemini APIを直接呼び出すよりシンプル
  • .env にAPIキーを設定して認証可能
  • 画像やテキストを組み合わせたマルチモーダル入力にも対応

⚙️ パフォーマンス最適化

7. Babel React Compiler (babel-plugin-react-compiler)

React 19から導入されたコンパイル最適化プラグインです。
レンダリング時のパフォーマンスを自動で最適化します。

{
  "plugins": ["babel-plugin-react-compiler"]
}

💡 効果

  • コンポーネントの自動メモ化
  • 不要な再レンダリングの削減
  • バンドルサイズの削減

🧭 システム構成まとめ

分類 技術 主な役割
フレームワーク Next.js + TypeScript ページ構成・API実装・型安全性
UI React + Tailwind CSS コンポーネント設計・スタイリング
品質管理 ESLint コード整形・静的解析
AI連携 Vercel AI SDK + Gemini モデル呼び出し・チャット処理
最適化 Babel React Compiler 高速描画・再レンダリング抑制

💬 まとめ

「AIチャットPoCのモダンフロント標準構成」

  • Next.js + React：モダンなUIフレームワーク
  • Tailwind：高速なデザイン実装
  • Vercel AI SDK + Gemini：AI応答を最小コードで実装
  • Babel Compiler：再レンダリング最適化でスムーズな操作感

🪄 AIデモやPoC開発に最適なテンプレート

【補足】エンタープライズ動向

Next.js 16 (App Router) + TypeScript + React 19.2 + Tailwind CSS 4 + Vercel AI SDK

は、AIフロントエンド／Webアプリ開発の最前線構成 です。
一方で、JavaやPython は今も依然として エンタープライズ（業務系・バックエンド）では主流。
つまり、両者は「競合」ではなく「棲み分け」が明確に進んでいます。

🧭 1. Next.js＋React系スタックの位置づけ（2025年時点）

💼 現状

  • フロントエンド領域では、完全に主流。
  • 特にエンタープライズで**「AIチャットUI」「SaaS管理画面」「ポータル画面」**を作る際に最も多く採用されています。
  • Microsoft, Vercel, OpenAI, Notion, Slack, Figma, どれもReactベース。

💪 採用理由

理由 説明
Next.js Reactアプリのサーバーサイドレンダリング（SSR）・API統合・ルーティングを統一的に提供。
TypeScript 大規模開発でも安全（型によるエラー防止、リファクタ容易）。
Tailwind CSS デザイン統一と高速開発が可能。Figma連携しやすい。
ESLint コード品質の自動チェック、レビュー効率化。
Vercel AI SDK AI連携部分を極小コードで実装できる（OpenAI, Gemini, Claude対応）。

👉 要するに「AI時代のモダンWebフロントの標準構成」です。
エンタープライズでも「AI連携画面を作る」「既存業務のUIを刷新する」際に非常に多く使われています。

⚙️ 2. Java・Pythonとの役割比較

項目 Next.js/React(TypeScript) Java (Spring Bootなど) Python (FastAPI/Djangoなど)
主な領域 フロントエンド・UI層 業務ロジック・バックエンド AI連携・API・ML処理
特徴 ブラウザUIが強い。UX重視。SSR・SPA両対応。 安定性・堅牢性。銀行・基幹系に強い。 軽量でAI・分析分野に強い。
チーム構成 Web/フロント開発者 サーバーエンジニア データサイエンティスト、AIエンジニア
開発スピード 高速（ホットリロード・自動ビルド） 中程度（設定・デプロイが重い） 高速（小規模API・PoC向き）
スケール性 VercelやCloudflare上で水平スケール J2EE環境やKubernetesでスケール FastAPI + Dockerでスケール
エンタープライズ実績 SaaS・AIダッシュボード・社内ポータル 金融・物流・製造・官公庁 分析基盤・MLOps・AI API

🧩 3. モダン開発では「併用」が主流

現在の大企業・SIer・スタートアップでは、役割ごとに技術を分ける構成が一般的です。

💡 典型的な構成例

層 技術 役割
フロントエンド Next.js + React + TypeScript + Tailwind ユーザーインターフェース、チャット、可視化
API層 Python (FastAPI) or Java (Spring Boot) 業務ロジック、AI連携API
AIサービス Vercel AI SDK or LangChain, SageMaker モデル推論・AIエージェント制御
データ層 PostgreSQL / DynamoDB / Snowflake データ保持・集計
インフラ AWS / GCP / Azure CI/CD、セキュリティ、スケール管理

🏢 4. エンタープライズ採用動向（2024〜2025）

分野 採用傾向
銀行・証券・保険 バックエンド：Javaが主流。ただし、顧客向けポータルUIはNext.js＋TypeScriptが急増。
製造・物流 デジタルツイン可視化やダッシュボードにReact/Tailwind採用例が多い。
SaaS / AIプロダクト ほぼ100%がReactベース。Next.js＋AI SDKがデファクト。
官公庁・教育機関 以前はVue.js中心だったが、2024年以降Next.js採用が増加中。

💬 特に「AIフロント実装」領域では、Next.js + Vercel AI SDKが急速にエンタープライズ標準化しつつあります。

🚀 5. 結論

観点 評価
モダン性 ★★★★★ — 現行Webの最先端構成
AI連携適性 ★★★★★ — SDKで即統合可能
大規模開発適性 ★★★★☆ — TypeScriptで型安全、品質も担保可
業務ロジック実装力（Java/Python比較） ★★☆☆☆ — 複雑な業務処理はバックエンド側で担うべき
採用トレンド（2025年時点） ✅ フロント＝Next.js系、バック＝Java/Python のハイブリッド構成が主流

🧭 要するに：

🔹 Java/Pythonは「裏側の脳」（堅牢な業務ロジック）
🔹 Next.js＋React＋TypeScriptは「顔」（洗練されたUIとAIの窓口）

AIやSaaS時代のシステム開発では、
この構成が 「最も現実的でモダンなエンタープライズ標準」 です。

Discussion