LobeChat is an AI conversation application built on the Next.js framework. It utilizes a range of technologies to implement various features and functionalities.
## Core Technology Stack
The core tech stack of LobeChat includes:
- **Framework**: We chose [Next.js](https://nextjs.org/), a powerful React framework that provides server-side rendering, routing, Router Handler, and other key features.
- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the base component library, along with [lobe-ui](https://github.com/lobehub/lobe-ui) for our business components.
- **State Management**: We selected [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library.
- **Network Requests**: We adopt [swr](https://swr.vercel.app/), a React Hooks library for data fetching.
- **Routing**: Routing management is handled directly by [Next.js](https://nextjs.org/).
- **Internationalization**: We implement multi-language support using [i18next](https://www.i18next.com/).
- **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library compatible with Ant Design.
- **Unit Testing**: We perform unit testing with [vitest](https://github.com/vitejs/vitest).
## Folder Structure
The folder structure of LobeChat is as follows:
```bash
src
├── app # Main application logic and state management code
├── components # Reusable UI components
├── config # Application configuration files, including client and server environment variables
├── const # Constants definitions, such as action types and route names
├── features # Business feature modules, e.g., Agent settings, plugin development dialogs
├── hooks # Custom hooks reused across the application
├── layout # Layout components like navigation bars and sidebars
├── locales # Internationalization language files
├── services # Encapsulated backend service interfaces, e.g., HTTP requests
├── store # zustand store for state management
├── types # TypeScript type definitions
└── utils # Utility functions