路由是什么：网址和页面的对应关系

第 3 章你把 my-first-app 跑了起来——浏览器里那个默认欢迎页，是你电脑上第一个真正属于自己的项目。

但冷静下来想想：那个页面是 Next.js 自带的，里面没有一个字是你的。这就好比新房子交付了，你却还没搞懂户型图——哪个网址对应哪个页面？我要加的页面该放哪？

这张"户型图"，在 Web 开发里有个专门的名字：路由。它是本章的主角，也是 Next.js 最核心的概念。搞懂它，后面盖房子的每一步都顺理成章。

先用门牌号理解"路由"

你上网时其实一直在和路由打交道，只是没注意：

访问 taobao.com → 看到淘宝首页
访问 taobao.com/cart → 看到购物车
访问 taobao.com/order → 看到订单页

同一个网站，网址后半段不一样，看到的页面就不一样。背后一定有套规则在回答一个问题："这个网址，该给你看哪个页面？"

这套"网址 → 页面"的对应规则，就是路由（Route）。

打个比方：网址是小区的门牌号，页面是住户，路由就是小区门口那本住户名册——你报出门牌号，门卫查名册，就知道该带你去哪一户。

传统开发里，这本"名册"要程序员手写一份配置（哪个路径对应哪个文件），又枯燥又容易写错。而 Next.js 干了一件特别聪明的事——

Next.js 的绝招：文件夹结构就是名册

在 Next.js 里，你不用手写名册。app/ 文件夹的目录结构，本身就是路由名册。

规则简单到只有两条：

app/ 里的文件夹名，就是网址的一段
每个文件夹里放一个 page.tsx，这个文件就是该网址要显示的页面

看几个例子就懂了（假设项目跑在 localhost:3000）：

项目里的文件位置	浏览器访问的网址	看到的页面
`app/page.tsx`	`localhost:3000`	首页
`app/about/page.tsx`	`localhost:3000/about`	关于页
`app/blog/page.tsx`	`localhost:3000/blog`	博客页
`app/blog/abc/page.tsx`	`localhost:3000/blog/abc`	某篇文章页

看出来了吗？左边文件树的每一层，都原样出现在右边网址里。 想给网站加一页，就在 app/ 里建个文件夹、放个 page.tsx——名册自动更新，不用任何额外配置。

这就是常说的"文件即路由"。第 1 章我们说 Next.js 的项目像一堆积木，app/ 文件夹就是积木的"图纸区"：图纸怎么摆，网址就怎么长。

为什么非要一个文件夹，而不是直接建 about.tsx 文件？这是 Next.js 的约定：文件夹负责"占住门牌号"，page.tsx 负责"门牌号里住什么人"。以后你还会在文件夹里见到 layout.tsx（布局）、loading.tsx（加载态）这些"室友"，它们各司其职——现在先记住 page.tsx 就够了。

动手：找到你的首页文件

光说不练假把式。现在打开第 3 章建的 my-first-app 项目（编辑器里打开它的文件夹），跟着做两件事：

第一步：找到首页对应的文件。

在左侧文件树里展开 app 文件夹，找到 page.tsx，点开它。对照上表——它就是 localhost:3000 那个首页。

里面的代码可能有点长，不用逐行看懂。你只要在里面找到几句眼熟的文字（比如默认欢迎页上的英文句子），确认"浏览器里看到的内容，果然来自这个文件"，这一步就完成了。

第二步：让首页出现你的话。

打开和 Agent 的对话，对它说：

把 app/page.tsx 这个首页改成最简版本，只显示一行大字："这是我的第一个 Next.js 项目"。

Agent 改完后，切回浏览器刷新 localhost:3000——那行字应该出现在页面上了。

如果看到了，停一秒，体会一下这条完整的链路：

你改文件 → 文件在 app/ 里 → app/ 的结构决定网址 → 浏览器按网址取页面。

你刚刚亲手摸了一遍"路由"的全身。它不是什么黑魔法，就是这套朴素到家的对应关系。

新手常问

Q：我访问了一个不存在的网址，比如 localhost:3000/haha，会怎样？

会看到 404 页面——"门牌号不存在"。因为 app/ 里没有 haha 这个文件夹，名册上查无此户。这是正常的，也说明路由规则真的在起作用。

Q：网址最后的斜杠有没有区别？比如 /about 和 /about/？

对 Next.js 来说基本没区别，都会到同一个页面。不用纠结，平时写不带斜杠的就行。

Q：page.tsx 这个名字能改吗？比如叫 index.tsx？

不能。page.tsx 是 Next.js 认准的"门牌"，名字拼错（pages.tsx、Page.tsx）都会被当成"此户无人"，访问时 404。建页面时拼写和大小写要一模一样。

本篇小结

路由 = "网址 → 页面"的对应规则，像小区的住户名册
Next.js 里文件即路由:app/ 的文件夹结构直接决定网址结构
约定两条：文件夹名是网址的一段，page.tsx 是该网址的页面
你已经动手验证过：改 app/page.tsx，首页内容就跟着变
page.tsx 名字是死规定；访问不存在的网址会得到 404

现在户型图已经看懂了。下一篇开始真正"盖房子"——给你的项目新建第一个全新页面，顺便体验 Next.js 一个让开发特别爽的功能：改完代码，浏览器自己刷新。