1.1.4 亲眼看到第一个页面——Hello World 验证：本地开发服务器启动
一句话破题
这是全栈开发的"开机时刻"——启动开发服务器，在浏览器中看到你的第一个页面。
核心价值
Hello World 不仅仅是一个测试页面，它验证了整个开发环境的正确配置。如果你能看到这个页面，说明：
- Node.js 运行正常
- 项目依赖安装成功
- Next.js 编译器工作正常
- 本地服务器可以启动
启动开发服务器
确保你在项目目录下，运行：
bash
pnpm dev你会看到类似这样的输出：
▲ Next.js 16.x.x
- Local: http://localhost:3000
- Environments: .env.local
✓ Ready in 2.1s访问你的页面
打开浏览器，访问 http://localhost:3000。你应该能看到 Next.js 的默认欢迎页面。
恭喜！你已经成功跑通了第一个 Next.js 项目。
修改页面内容
让我们做一个简单的修改来验证热更新：
- 用编辑器打开
src/app/page.tsx - 找到页面中的文字，改成你想要的内容
- 保存文件
你会发现浏览器自动刷新，显示你修改后的内容。这就是 Next.js 的热模块替换功能，它让你的开发体验非常丝滑。
第一次修改示例
把 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">我的第一个 Next.js 应用</h1>
<p className="mt-4 text-gray-600">Hello, Vibe Coding!</p>
</main>
);
}保存后，浏览器会自动显示新内容。
开发服务器的常用操作
| 操作 | 快捷键/命令 |
|---|---|
| 启动服务器 | pnpm dev |
| 停止服务器 | Ctrl + C |
| 重启服务器 | 停止后再启动 |
| 清除缓存重启 | rm -rf .next && pnpm dev |
常见问题排查
问题 1：端口被占用
Error: listen EADDRINUSE: address already in use :::3000解决方案：换一个端口启动
bash
pnpm dev -p 3001问题 2：依赖未安装
Cannot find module 'xxx'解决方案：重新安装依赖
bash
pnpm install问题 3：页面白屏
打开浏览器开发者工具（F12），查看 Console 面板的错误信息，复制给 AI 帮你排查。
里程碑达成
到这里，你已经完成了本节的全部目标：
- [x] 选择并安装了代码编辑器
- [x] 配置了 AI 助手
- [x] 初始化了 Next.js 项目
- [x] 启动了开发服务器
- [x] 看到了第一个页面
下一步：学习 Vibe Coding 的核心心法，从"写代码"转变为"指挥 AI 写代码"。