LobeChat is an AI conversation application built on the Next.js framework. It uses a series of technology stacks to implement various functions and features.
## Basic Technology Stack
The core technology stack of LobeChat is as follows:
- **Framework**: We chose [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, Router Handler, etc. for our project.
- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as the basic component library, and introduce [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library.
- **State Management**: We use [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**: For routing management, we directly use the solution provided by [Next.js](https://nextjs.org/) itself.
- **Internationalization**: We use [i18next](https://www.i18next.com/) to implement multi-language support for the application.
- **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library that complements Ant Design.
- **Unit Testing**: We use [vitest](https://github.com/vitejs/vitest) for unit testing.
## Folder Directory Structure
The folder directory structure of LobeChat is as follows:
\`\`\`bash
src
├── app # Main logic of the application and code related to state management
├── components # Reusable UI components
├── config # Application configuration files, including client-side environment variables and server-side environment variables
├── const # Used to define constants, such as action types, route names, etc.
├── features # Function modules related to business functions, such as Agent settings, plugin development pop-ups, etc.
├── hooks # Custom utility hooks reused throughout the application
├── layout # Application layout components, such as navigation bars, sidebars, etc.
├── locales # Language files for internationalization
├── services # Encapsulated backend service interfaces, such as HTTP requests
├── store # Zustand store for state management
├── types # TypeScript type definition files
└── utils # Common utility functions
\`\`\`
