Next.js 16 全栈实战（一）：从零打造“教培管家”系统——环境与脚手架搭建

前言
[1. 开发环境准备](#1. 开发环境准备)
- [1.1 Node.js (运行时环境)](#1.1 Node.js (运行时环境))
- [1.2 Git (版本控制)](#1.2 Git (版本控制))
- [1.3 PostgreSQL (数据库)](#1.3 PostgreSQL (数据库))
[2. 我们的秘密武器：AI 辅助开发流](#2. 我们的秘密武器：AI 辅助开发流)
- [2.1 IDE 选择：Trae (trae.cn)](#2.1 IDE 选择：Trae (trae.cn))
- [2.2 智囊团：Kimi 2.5](#2.2 智囊团：Kimi 2.5)
[3. 动手：初始化 Next.js 脚手架](#3. 动手：初始化 Next.js 脚手架)
[4. 第一次启动与清理](#4. 第一次启动与清理)
- [4.1 启动项目](#4.1 启动项目)
- [4.2 清理样板代码](#4.2 清理样板代码)
[5. 连接数据库：配置环境变量](#5. 连接数据库：配置环境变量)
- [5.1 创建数据库](#5.1 创建数据库)
- [5.2 配置 .env](#5.2 配置 .env)
[6. 提交代码](#6. 提交代码)
[7. 推送到远程仓库](#7. 推送到远程仓库)
下一步预告

前言

写在前面：

很多初学者想做全栈开发，但往往倒在了环境搭建和复杂的配置上。

本系列教程将带你从零开始，开发一个商业级的RBAC（基于角色的权限控制）教培管理系统 。我们将不玩虚的，直接使用 2026 年最硬核的技术栈：Next.js 16 + Postgres + Shadcn UI 。

此外，我们将引入"AI 结对编程"的新模式：使用 Trae 编辑器配合 Kimi 2.5 大模型，让你体验什么是"10倍速开发"。

1. 开发环境准备

在开始写代码之前，我们需要准备好三把"利器"。

1.1 Node.js (运行时环境)

Next.js 是基于 Node.js 运行的。

下载：访问 Node.js 官网，推荐下载 LTS (长期支持版)，目前版本是 v24.x 。

验证：打开终端（Terminal/CMD），输入：

bash 复制代码

node -v
# 输出如：v24.12.0 即为成功

1.2 Git (版本控制)

这是程序员的"后悔药"，用于管理代码历史。

下载：访问 Git 官网下载安装。

验证：

bash 复制代码

git --version

1.3 PostgreSQL (数据库)

我们要搭建的是全栈应用，数据存储是核心。PostgreSQL 是目前最流行、最强大的开源关系型数据库。

下载：访问 PostgreSQL 官网根据你的系统下载安装包。

安装注意 ：安装过程中会让你设置一个 postgres 超级用户的密码，请务必记下来！ （比如设置为 123456，本地开发方便记忆）。

验证：安装完成后，打开 SQL Shell (psql) ，按回车键直到提示输入密码，输入后显示 # 提示符即成功。

2. 我们的秘密武器：AI 辅助开发流

这个教程与其他教程最大的不同，是我们使用 AI Native 的方式开发。

2.1 IDE 选择：Trae (trae.cn)

VS Code 很好，但 Trae 是字节跳动推出的一款 AI 原生 IDE（完全兼容 VS Code 插件）。它集成了强大的 AI 对话和代码补全功能。

下载：访问 trae.cn 下载安装。

配置：安装后，它会自动同步你 VS Code 的配置（如果有）。在右侧边栏，你可以随时召唤 AI。

2.2 智囊团：Kimi 2.5

在开发中遇到不懂的报错、或者需要生成复杂的 SQL 语句时，我们将使用 Kimi 2.5。

用法：你可以在 Trae 的右侧 Chat 栏中，直接问它："Next.js App Router 中如何获取 URL 参数？" 或者让它帮你写一段 Zod 校验代码。

3. 动手：初始化 Next.js 脚手架

现在，打开cmd，在终端中输入以下命令来初始化我们的项目：

bash 复制代码

npx create-next-app@latest edu-manager

Next.js 的官方脚手架会通过交互式问答来配置项目。为了配合我们后续的 RBAC 设计，选择默认推荐的配置即可

4. 第一次启动与清理

打开我们的trae，点击文件，选择打开文件夹

选择我们刚刚创建的项目目录

4.1 启动项目

选择终端，点击新建终端

在终端输入：

bash 复制代码

npm run dev

然后点击侧边栏的预览图标，输入访问地址http://localhost:3000，就可以看到欢迎页

4.2 清理样板代码

官方生成的首页包含很多 logo 和说明，我们需要一个干净的画板。

打开 src/app/page.tsx，删除里面所有的代码，只保留最基础的结构：

tsx 复制代码

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">教培管家系统启动 🚀</h1>
    </main>
  );
}

打开 src/app/globals.css，保留顶部的 @tailwind 指令，删除下方 :root 和 body 中关于背景色渐变的默认样式，防止干扰我们后续的设计。

5. 连接数据库：配置环境变量

虽然我们安装了 PostgreSQL，但 Next.js 还需要知道怎么连接它。

5.1 创建数据库

打开你电脑上的 SQL Shell (psql)，执行一条 SQL 命令：

sql 复制代码

CREATE DATABASE edu_manager_db;

输入\l命令来验证数据库是否创建成功

5.2 配置 .env

在项目根目录下创建一个名为 .env 的文件（注意不要提交到 Github），添加以下内容：

env 复制代码

# 连接字符串格式：postgres://用户名:密码@地址:端口/数据库名
POSTGRES_URL="postgres://postgres:你的密码@localhost:5432/edu_manager_db"

(注意：将 你的密码 替换为安装 PostgreSQL 时设置的密码)

6. 提交代码

最后，保持良好的习惯，提交我们的第一次代码，在终端中输入：

bash 复制代码

git add .
git commit -m "feat: 初始化 Next.js 16 + Tailwind 项目结构"

7. 推送到远程仓库

如果代码只放在我们本地，万一中毒或者硬盘损坏，那我们的代码就没有了，我们需要把他备份到一个远程的仓库里。这里我们选择备份到gitcode里官网

点击新建，选择新建项目

输入项目的名称，保持默认就可以，点击创建项目

创建成功后复制我们的项目地址

回到我们的trae里，关联到我们的远程仓库

bash 复制代码

git remote add origin https://gitcode.com/u012877217/edu-manager.git

推送之前需要把我们的分支改成main

bash 复制代码

git branch -m master main

然后推送分支

bash 复制代码

git push -u origin main

这个时候会弹出输入用户名和密码，不知道为啥他已经禁用了密码登录，我们改为创建令牌。打开个人设置，找到访问令牌

输入令牌名称

然后在gitcode的验证窗口输入用户名和令牌

输入成功之后就会把我们的代码推入远程仓库保存

下一步预告

恭喜你！你已经拥有了一个基于 Next.js 16 的全栈开发环境，并且配备了 AI 强力辅助。

在下一篇文章中，我们将进行真正的"装修"工作：

引入 Shadcn UI 组件库（目前最火的 React 组件库）。
搭建 Dashboard 布局（侧边栏、顶部导航）。
设计数据库 Schema，让种子数据跑起来。

关注我，一起成为 AI 时代的全栈开发者！