使用 Monorepo 实现 Next.js 后端API 接口定义和移动端同步 - AI 版

4 阅读2分钟

提示词

使用 pnpm + Turborepo 初始化包含 Flutter App 和 Next.js API 的 Monorepo 项目,实现 OpenAPI 到 Dart SDK 的自动生成流程,并配置统一的 VS Code 开发环境。

以下是 Qoder 提供的 plan。高质量的提示词效果喜人

Monorepo 初始化计划

项目结构

helloworld/
├── apps/
│   ├── api/              # Next.js API 服务器
│   └── mobile/           # Flutter App
├── packages/
│   └── api-client/       # 生成的 Dart SDK
├── turbo.json            # Turborepo 配置
├── pnpm-workspace.yaml   # pnpm workspace 配置
├── package.json          # 根 package.json
└── .vscode/              # VS Code 统一配置
    ├── settings.json
    ├── extensions.json
    └── launch.json

任务列表

Task 1: 初始化 Monorepo 基础结构

  • 创建根目录 package.json,配置 pnpm workspace
  • 创建 pnpm-workspace.yaml 定义 workspace 范围
  • 创建 turbo.json 配置构建管道和缓存策略

Task 2: 初始化 Next.js API 服务器

  • 使用 create-next-appapps/api 目录初始化 Next.js 项目
  • 安装 OpenAPI 生成依赖:next-swagger-doc, swagger-ui-react
  • 配置 API 路由和 Swagger/OpenAPI 文档生成
  • 创建示例 API 端点用于测试

Task 3: 初始化 Flutter App

  • 使用 flutter createapps/mobile 目录初始化 Flutter 项目
  • 配置 Flutter 项目支持 Dart 3

Task 4: 配置 OpenAPI 到 Dart SDK 生成流程

  • packages/api-client 创建 Dart package
  • 安装 CLI 工具:openapi-generator-cli
  • 配置生成脚本:从 Next.js API 获取 OpenAPI spec → 生成 Dart 代码
  • turbo.json 中配置依赖关系,确保 API 先生成 spec 再生成 Dart SDK

Task 5: 配置 VS Code 统一开发环境

  • 创建 .vscode/settings.json:配置 Dart/Flutter 和 TypeScript 设置
  • 创建 .vscode/extensions.json:推荐必备扩展
  • 创建 .vscode/launch.json:配置调试配置(Flutter 和 Next.js)
  • 配置任务(tasks.json)用于一键生成 SDK

Task 6: 验证集成

  • 运行 Next.js API 并验证 OpenAPI 文档可访问
  • 执行 SDK 生成流程
  • 在 Flutter App 中引入生成的 SDK 并测试调用
  • 验证 Turborepo 管道正常工作

技术栈

  • 包管理: pnpm
  • Monorepo 工具: Turborepo
  • API 服务器: Next.js + TypeScript
  • OpenAPI 生成: next-swagger-doc + openapi-generator-cli
  • 移动端: Flutter + Dart
  • IDE: VS Code

依赖关系图

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│  Next.js    │────▶│ OpenAPI Spec │────▶│ Dart SDK    │
│  API        │     │ (JSON/YAML)  │     │ Generator   │
└─────────────┘     └──────────────┘     └──────┬──────┘
                                                │
                                                ▼
                                         ┌─────────────┐
                                         │  Flutter    │
                                         │  App        │
                                         └─────────────┘