| 1 | # 初始化前端 |
| 2 | |
| 3 | 配置并启动 Next.js 前端服务。 |
| 4 | |
| 5 | ## 步骤1：进入前端目录 |
| 6 | |
| 7 | ```bash |
| 8 | cd video-claw/frontend |
| 9 | ``` |
| 10 | |
| 11 | ## 步骤2：安装依赖（首次） |
| 12 | |
| 13 | ```bash |
| 14 | npm install |
| 15 | ``` |
| 16 | |
| 17 | > **注意**：如果安装慢，可使用国内镜像： |
| 18 | > ```bash |
| 19 | > npm config set registry https://registry.npmmirror.com |
| 20 | > npm install |
| 21 | > ``` |
| 22 | |
| 23 | ## 步骤3：确认后端地址 |
| 24 | |
| 25 | 前端默认通过 Next.js rewrite 访问本机后端 `http://localhost:8000`，通常无需单独配置。 |
| 26 | |
| 27 | ## 步骤4：Build 并启动 |
| 28 | |
| 29 | ```bash |
| 30 | # 首次 build（必须） |
| 31 | npm run build |
| 32 | |
| 33 | # 启动服务 |
| 34 | npm start |
| 35 | ``` |
| 36 | |
| 37 | ## 步骤5：验证 |
| 38 | |
| 39 | ```bash |
| 40 | curl http://localhost:3000 |
| 41 | ``` |
| 42 | |
| 43 | 返回 HTML 表示成功。 |
| 44 | |
| 45 | ## 后续启动 |
| 46 | |
| 47 | 首次初始化后，后续启动只需： |
| 48 | |
| 49 | ```bash |
| 50 | cd video-claw/frontend |
| 51 | npm start |
| 52 | ``` |
| 53 | |
| 54 | ## 常见问题 |
| 55 | |
| 56 | | 错误 | 原因 | 解决方法 | |
| 57 | |------|------|----------| |
| 58 | | `npm: command not found` | Node.js 未安装 | 安装 Node.js 18+ | |
| 59 | | `Error: Could not find or load config file` | .next 目录损坏 | `rm -rf .next && npm run build` | |
| 60 | | 白屏/空白页面 | build 缓存问题 | `rm -rf .next && npm run build` | |
| 61 | | `Address already in use` | 端口 3000 被占用 | `lsof -ti :3000 | xargs kill` | |
| 62 | | 依赖安装失败 | 网络问题 | 使用镜像或科学上网 | |
| 63 |