# next-template

**Repository Path**: foril/next-template

## Basic Information

- **Project Name**: next-template
- **Description**: Next.js 前端开发模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-12
- **Last Updated**: 2023-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Next.js 前端开发模板
本模板使用 `create-next-app` 构建，未使用 `ts`，完成 `eslint`, `prettier`, `editorconfig` 支持，预装 `recharts` 以及 `material UI`。
## 使用方式
clone 到本地后，运行
```bash
npm install
```
完成依赖安装后，运行
```bash
npm run dev
```
即可启动开发服务器。

## 部署
运行
```bash
npm run build
```
完成打包后，运行
```bash
npm run start -p 80
```
使项目运行在 80 端口即可。

## 项目结构
```bash     
.
├── .editorconfig             # 定义代码格式化规则的配置文件，不同的编辑器可以使用它来确保代码格式化的一致性
├── .eslintrc.json            # 配置ESLint代码检查工具的配置文件，其中包含定义代码规则的选项和规则
├── .git                      # 存储Git版本控制信息的目录，包括您的代码历史和分支信息等
├── .gitignore                # Git版本控制忽略文件，用于指定Git应该忽略哪些文件和目录
├── .next                     # 存储使用Next.js框架时生成的缓存和构建文件的目录
├── .prettierrc               # 配置Prettier代码格式化工具的文件，其中包含定义代码格式化选项的选项
├── README.md                 # 项目的README文件，通常用于提供项目信息和使用说明等
├── jsconfig.json             # 配置JavaScript项目的选项，包括文件路径别名和代码检查选项等
├── next.config.js            # 配置使用Next.js框架时的一些选项和行为，包括Webpack和Babel选项等
├── node_modules              # 存储项目中使用的Node.js模块的目录
├── package.json              # 存储项目的元数据和依赖项信息，包括项目名称、版本、作者、依赖项和脚本等
├── postcss.config.js         # 配置PostCSS工具的选项，包括自动添加浏览器前缀和CSS优化选项等
├── public                    # 存储项目中使用的静态文件的目录，包括图像、字体、样式和脚本等
├── src                       # 存储项目源代码的目录，包括React组件、样式和数据等
├── tailwind.config.js        # 配置Tailwind CSS框架的选项，包括颜色、字体和响应式设计等
└── yarn.lock                 # 存储项目使用的Yarn包管理器的锁文件，确保每个人使用的版本都一致

```

接下来，具体的开发教程参考：
* [React 官方文档](https://react.dev/)
* [Next.js 官方文档](https://nextjs.org/)
* [MUI 官方文档](https://mui.com/core/)
* [Recharts 官方文档](https://recharts.org/en-US/guide/getting-started)