一、创建脚手架(nestjs+next.js从零开始一步一步创建通用后台管理系统)

990 阅读2分钟

搭建Monorepo项目(脚手架)

1、Monorepo介绍

Monorepo 是一种开发模式,将所有项目代码存储在单个版本控制仓库中。这种模式有助于简化代码共享、管理依赖、减少重复工作,提高代码的可维护性和一致性。

使用Monorepo的好处:

  1. 代码共享与重用:不同项目之间可以共享代码,减少重复开发,提高效率。
  2. 依赖管理:可以统一管理依赖,避免多个项目中重复安装相同的依赖。
  3. 版本控制:更容易跟踪和管理项目之间的版本,避免冲突。
  4. 一致性:可以确保所有项目都使用相同的代码风格、工具和配置,提高代码一致性。
  5. 持续集成和部署:可以通过单一仓库实现持续集成和持续部署,简化流程

2、项目创建步骤

1)、安装 TurboRepo

首先,在您的终端中运行以下命令安装 TurboRepo

pnpm add turbo --global

2)、创建TurboRepo项目

为你的应用创建一个目录,如mystudy,在命令行该目录下执行下面命令:

npx create-turbo@latest .

2025-05-12-16-14-01-1747037629141.png

2025-05-12-16-15-34-1747037729624.png

3)、运行测试

在mystudy目录下运行:

pnpm run dev

系统显示如下界面:

2025-05-12-16-18-32-image.png

4)、创建nestjs 服务端项目

4.1)、安装nestjs cli
npm i -g @nestjs/cli
4.2)、创建api项目
cd mystudy/apps
nest new api

2025-05-12-16-20-27-1747038015581.png

2025-05-12-16-21-37-1747038090141.png

4.3)、修改端口

因为前端web项目和后端api项目都使用了3000端口,所以需要修改后端端口号。

使用trae打开程序:

2025-05-12-16-23-59-image.png

image.png

4.4)、修改启动命令

因为Monorepo项目支持一个命令启动前后端项目,但是nestjs的启动命令与nextjs前端启动命令不一致,无法一个命令启动,所以需要修改后端的启动命令,把start:dev修改为dev:

image.png

4.5)、启动测试

打开一个命令行终端:

image.png

在命令行中输入 pnpm run dev:

image.png

在浏览器中输入 [http://localhost:3000,显示如下界面:]

2025-05-12-16-35-12-image.png

在浏览器中输入 [http://localhost:8000,显示如下界面:]

2025-05-12-16-35-28-image.png

在终端窗口按CTRL+C命令退出应用。

3、创建一个示例应用

1)、在apps/api目录下,在命令行终端中输入:

nest g res test

2025-05-12-16-50-23-image.png

2025-05-12-16-50-55-image.png

2025-05-12-16-52-01-image.png

image.png

2)、运行测试

打开控制器文件查看有哪些接口:

2025-05-12-16-54-29-image.png

在浏览器中输入:http://localhost:8000/test/100(别忘了运行pnpm run dev启动项目),系统显示如下:

2025-05-12-16-56-47-image.png

至此脚手架搭建完毕,下一章节搭建API接口文档