LobeChatはNext.jsフレームワークに基づくAI会話アプリケーションです。様々な機能や特性を実現するために複数の技術スタックを使用しています。
## 基本技術スタック
LobeChatのコア技術スタックは以下の通りです。
- **フレームワーク**：[Next.js](https://nextjs.org/)を採用しています。強力なReactフレームワークで、サーバーサイドレンダリング、ルーティングフレームワーク、Router Handlerなどの重要機能を提供します。
- **コンポーネントライブラリ**：[Ant Design (antd)](https://ant.design/)を基礎コンポーネントライブラリとして使用し、さらに[lobe-ui](https://github.com/lobehub/lobe-ui)をビジネスコンポーネントライブラリとして導入しています。
- **状態管理**：[zustand](https://github.com/pmndrs/zustand)を採用。軽量で使いやすい状態管理ライブラリです。
- **ネットワークリクエスト**：[swr](https://swr.vercel.app/)を使用。React Hooksベースのデータ取得ライブラリです。
- **ルーティング**：Next.js自身が提供するルーティングソリューションを直接使用しています。
- **国際化**：[i18next](https://www.i18next.com/)を用いて多言語対応を実現しています。
- **スタイル**：[antd-style](https://github.com/ant-design/antd-style)を使用。Ant Designに対応したCSS-in-JSライブラリです。
- **単体テスト**：[vitest](https://github.com/vitejs/vitest)で単体テストを実施しています。
## フォルダ構成
LobeChatのフォルダ構成は以下の通りです。
```bash
src
├── app # アプリケーションの主要ロジックと状態管理関連コード
├── components # 再利用可能なUIコンポーネント
├── config # クライアントおよびサーバー環境変数を含む設定ファイル
├── const # 定数定義（アクションタイプ、ルート名など）
├── features # ビジネス機能モジュール（Agent設定、プラグイン開発ダイアログなど）
├── hooks # アプリ全体で再利用されるカスタムHooks
├── layout # アプリのレイアウトコンポーネント（ナビゲーションバー、サイドバーなど）
├── locales # 国際化用言語ファイル
├── services # バックエンドサービスインターフェース（HTTPリクエストなど）
├── store # zustandによる状態管理ストア
├── types # TypeScriptの型定義ファイル
└── utils # 汎用ユーティリティ関数
