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)を選びました。これは軽量で使いやすい状態管理ライブラリです。
- **ネットワークリクエスト**：私たちは[data fetching](https://swr.vercel.app/)のためにReact Hooksライブラリを採用しました。
- **ルーティング**：ルーティング管理には[Next.js](https://nextjs.org/)が提供するソリューションを直接使用します。
- **国際化**：私たちは[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 # エージェント設定、プラグイン開発ポップアップなどのビジネス機能に関連する機能モジュール
├── hooks # アプリ全体で再利用されるカスタムフック
├── layout # アプリのレイアウトコンポーネント、ナビゲーションバー、サイドバーなど
├── locales # 国際化の言語ファイル
├── services # 封装されたバックエンドサービスインターフェース、HTTPリクエストなど
├── store # 状態管理のためのzustandストア
├── types # TypeScriptの型定義ファイル
└── utils # 一般的なユーティリティ関数
\`\`\`
