创建你的第一个 Next.js 项目

三件套装齐了：Node（发动机）、编辑器（工作台）、Agent（厨师）。这一篇，我们来点真格的——用 Agent 创建你的第一个 Next.js 项目，并亲眼看到它在浏览器里跑起来。

这是本章的高潮，也是你从"学编程"到"做项目"的真正起点。

先认识一下 Next.js

在开始之前，花一分钟认识我们要用的框架：Next.js。

一句话说明白：Next.js 是一个能让你"前端 + 后端一起写"的框架。

还记得第 1 章说，一个完整的应用需要"前端 + 后端 + 数据库"吗？很多框架只能做其中一头，而 Next.js 把前端和后端放在了同一个项目里——这正是"全栈"的含义，也是这门课选它的原因。

你不用现在就去理解它的原理。你只要记住：

• 它是目前最流行的全栈框架之一，用 JavaScript 写
• 我们后面整门课的项目，都建在它的基础上
• 这一篇，你先把它"跑起来"，混个脸熟就行

创建项目：交给 Agent

传统教程到这里，会让你背一条命令 npx create-next-app@latest，然后逐个回答一堆配置问题（要不要 TypeScript？要不要这个那个？）——新手很容易在这一步懵掉。

我们不用这么干。把"创建项目"整个交给 Agent。

在 Agent 里，对它说：

帮我在当前文件夹创建一个 Next.js 项目，要求：

• 使用 App Router（新版路由）
• 使用 TypeScript
• 使用 Tailwind CSS
• 项目名叫 my-first-app 创建好后，帮我启动它，并告诉我在浏览器里访问哪个地址。

Agent 收到后会自己干活：调用 npm 下载、创建一堆文件、安装依赖。这个过程可能要一两分钟（要下载不少东西），耐心等它跑完。

上面这些"要求"（App Router / TypeScript / Tailwind）你可能还不懂是什么——没关系。它们是做现代 Web 项目的"标配三件套"，后面章节会一个个用到。现在你只管照抄这段话，让 Agent 帮你建就行。

认识建出来的项目长什么样

Agent 建好后，打开左边的文件树，你会看到一堆文件和文件夹。别被吓到——大部分文件你现在都不用管。只认识三个最重要的：

my-first-app/
├── app/              ← 你的页面都放这里（最重要！）
│   └── page.tsx      ← 首页（你看到的第一个页面就是它）
├── public/           ← 放图片等静态文件
└── package.json      ← 项目的"清单"，记了它依赖哪些包

• app/ 文件夹：这是核心。你写的每一个页面，都是这里面的一块。第 4 章我们就要在这里加页面。
• public/ 文件夹：放图片、图标这类静态资源。
• package.json：记录这个项目"依赖了哪些包"（Next.js、React 等）。它就像项目的"配料表"。

现在你只要知道"页面在 app 里，图片在 public 里"就够了，其他的以后用到再说。

启动项目：看到它在浏览器里跑起来

Agent 建完项目，通常会顺手帮你启动。如果没启动，你就对它说一句：

帮我启动这个项目。

它会在终端里跑 npm run dev（不用记，Agent 会做）。启动成功后，终端会显示一行类似：

  ➜  Local:   http://localhost:3000

这行的意思是：你的项目已经在本地跑起来了，可以通过 localhost:3000 这个地址访问。

现在，打开你的浏览器，在地址栏输入：

localhost:3000

回车——你应该会看到一个网页显示出来！（通常是 Next.js 的默认欢迎页）

这一刻，值得停下来感受一下

看着浏览器里那个页面，你可能觉得"不就是个默认页面吗"。但请你意识到一件事：

这个页面，是跑在你自己电脑上的、属于你自己的项目。

• 它不是别人的网站，是你的代码跑出来的
• 它的"发动机"是你刚装的 Node
• 它是 Agent 帮你建的，但项目是你的

从第 1 章那个只能看不能用的名片页，到现在一个真正能在本地跑起来的全栈项目——你已经跨过了新手最难的一道坎：环境搭建 + 项目起步。

几个新手常问的问题

Q：那个 localhost:3000 是什么意思？

localhost 指"你自己的电脑"，3000 是"端口号"（可以理解成你电脑上这间"厨房"的门牌号）。它只能你自己访问，别人看不到——这是正常的，后面第 15 章"部署"才会把它放到公网上。

Q：怎么停掉项目？

回到终端，按 Ctrl + C（Mac 也是 Ctrl + C），项目就停了。想再启动，让 Agent 再跑一次，或自己敲 npm run dev。

Q：终端被项目"占用"了，我想敲别的命令怎么办？

项目运行时，那个终端窗口就被它占着。你可以再开一个终端（编辑器里"终端 → 新建终端"），或先 Ctrl + C 停掉再操作。

Q：如果启动报错了？

老规矩——复制报错给 Agent，说"启动项目报这个错，帮我解决"。它会看报错、告诉你怎么修。这是第 2 章学的修错流程，现在正是用的时候。

本篇小结

• Next.js 是"前端 + 后端一起写"的全栈框架，是这门课的主角
• 创建项目不用背命令，交给 Agent：说要 App Router + TypeScript + Tailwind 即可
• 项目结构记住两个：页面在 app/，静态文件在 public/
• 启动后在浏览器访问 localhost:3000，看到页面就是成功
• Ctrl + C 停止项目；启动报错就丢给 Agent

第 3 章总结

到这里，第 3 章就结束了。回顾一下你搭好的这套"开发厨房"：

1. Node.js：代码的"发动机"，用 node -v 验证装好
2. 代码编辑器：你的"工作台"，认识了文件树、编辑区、内置终端
3. AI Agent：你的"厨师"，能听懂指令、动手干活
4. 第一个 Next.js 项目：已经创建并在浏览器里跑了起来

更重要的是，这一章你把第 2 章学的"指挥 AI"的本领真正实战了一遍——你提需求让 Agent 装环境、建项目，你验收看项目跑没跑起来。这套"你指挥 → Agent 干活 → 你验收"的工作方式，会贯穿后面所有章节。

现在，你手上有了一个能跑的项目。但它还只是个"默认欢迎页"——里面没有你自己的东西。

下一章，我们就要往这个项目里写你自己的第一个页面了。你将学会 Next.js 最核心的概念——路由（哪个网址对应哪个页面），真正开始"盖房子"。我们第 4 章见。