# Simba-Index

本项目是一个基于 TypeScript 和 Next.js 的战队主页模板，用于生成战队主页所需的静态文件，生成后部署在具有 Nginx/OpenResty 环境的网页服务器中分发，以介绍、宣传战队。
[点击这里](https://www.simba-robotics.com)查看最新部署呈现的效果。

---

## 项目结构

项目的主要目录和文件结构如下：

```plaintext
SimbaIndex/
├── .next/                     # Next.js 构建输出目录
├── pages/                     # 页面组件目录
│   ├── index.tsx              # 首页
│   ├── history/               # 历史记录页面
│   │   ├── page.tsx           # 历史记录页面主文件
│   │   ├── layout.tsx         # 历史记录页面布局文件
├── components/                # 可复用的 React 组件
├── styles/                    # 样式文件
├── public/                    # 静态资源文件
├── package.json               # 项目依赖和脚本
├── tsconfig.json              # TypeScript 配置文件
└── README.md                  # 项目说明文件
```

---

## 开发环境要求

在开始开发之前，请确保您的系统满足以下要求：

- **Node.js**: 版本 >= 16.x
- **npm** 或 **yarn**: 用于管理依赖
- **TypeScript**: 项目使用 TypeScript 编写
- **Next.js**: 用于服务端渲染和静态站点生成

---

## 安装依赖

在项目根目录下运行以下命令以安装所需依赖：

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

---

## 启动开发服务器

运行以下命令以启动本地开发服务器：

```bash
# 使用 npm
npm run dev

# 或使用 yarn
yarn dev
```

开发服务器默认运行在 `http://localhost:3000`。

---

## 编译和构建

要生成生产环境的构建版本，请运行以下命令：

```bash
# 使用 npm
npm run build

# 或使用 yarn
yarn build
```

构建完成后，输出文件将存储在 `.next/` 目录中。

---

## 调试方法

1. **本地调试**：
   - 启动开发服务器后，使用浏览器访问 `http://localhost:3000`。
   - 使用浏览器开发者工具调试页面。

2. **VS Code 调试**：
   - 在项目根目录中创建或编辑 `.vscode/launch.json` 文件，添加以下配置：

     ```json
     {
       "version": "0.2.0",
       "configurations": [
         {
           "type": "node",
           "request": "launch",
           "name": "Next.js Debug",
           "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
           "args": ["dev"],
           "cwd": "${workspaceFolder}",
           "protocol": "inspector",
           "port": 9229
         }
       ]
     }
     ```

   - 按下 `F5` 启动调试。

---

## 常见问题

### 1. 找不到模块或类型声明

如果遇到类似 `找不到模块` 的错误，请运行以下命令安装缺失的依赖：

```bash
npm install
npm install --save-dev @types/<模块名>
```

### 2. 构建失败

确保所有依赖已正确安装，并运行以下命令清理缓存后重新构建：

```bash
npm run clean
npm run build
```

---

## 贡献指南

欢迎对本项目提出改进建议或提交代码贡献。请确保在提交代码前运行以下命令以检查代码质量：

```bash
npm run lint
npm run test
```

---

## 许可证

本项目基于 [MIT License](LICENSE) 开源。