本章定位上一章我们已经正式进入第五阶段Next.js。你已经先建立了这一阶段最重要的一层认知Next.js 是基于 React 的应用开发框架。它不是替代 React而是在 React 基础上补上更完整的应用能力。真实项目不仅需要会写组件还需要路由、布局、数据、构建和部署等能力。初学阶段不必一上来就死磕所有渲染模式。也就是说到现在为止你已经不再只是知道“Next.js 很常见”而是已经知道它为什么会在现代 React 项目里这么重要。接下来我们就要真正开始接触 Next.js 项目里最基础、也最常用的内容了页面路由与基础布局。这一章非常重要。因为它会第一次让你真正看到页面文件和 URL 地址之间是什么关系多个页面怎样组织起来为什么layout.tsx能减少重复结构一个更像“网站”的项目骨架应该怎样搭起来你可以把这一章理解成从“理解为什么学习 Next.js”正式进入“开始搭建一个多页面应用的基础结构”。本章学习目标学完这一章后你应该能做到理解路由的基本概念。知道 URL 地址和页面内容之间的对应关系。理解 Next.js 中app/目录、page.tsx和layout.tsx的基础作用。学会设计一个最基本的多页面网站结构。理解为什么导航、页头、页脚通常适合放在布局层。知道首页、列表页、详情页、关于页这类常见页面分别扮演什么角色。能看懂一个简单的 Next.js 路由目录示意。学会为页面添加基础导航链接。初步理解当前导航高亮的思路。为下一章学习数据获取与页面渲染基础做好准备。一、为什么一进入 Next.js就先学路由和布局这不是随便安排的顺序。因为对于一个完整网站来说最先要想清楚的通常不是某个按钮的样式而是这个网站有几个页面每个页面负责展示什么用户怎么在不同页面之间切换哪些结构是所有页面都会共用的这正对应两件非常核心的事情路由布局你可以先把它们理解成路由决定“去哪里”布局决定“这些页面共用什么外壳”。如果这两件事一开始没想清楚后面的页面越写越多就会越来越乱。二、什么是路由先给一个当前阶段最够用的理解路由就是 URL 地址和页面内容之间的对应关系。例如/对应首页/posts对应文章列表页/posts/react-introduction对应一篇文章详情页/about对应关于页面1. 为什么这个概念这么重要因为用户访问网站时本质上不是在说我要看某个组件文件而是在说我要访问某个地址浏览器能根据地址展示出正确页面这背后就是路由在工作。2. 前端为什么必须建立路由意识因为只要项目从“一个页面”变成“多个页面”你就一定会遇到这些问题地址怎么设计页面怎么拆导航怎么跳刷新后还能不能保留当前页面这就是为什么进入 Next.js 后路由会成为最基础的一课。三、什么是基础布局再来看布局。你可以先这样理解布局是多个页面共享的一层外部结构。例如一个网站里很多页面都会共用这些部分顶部导航栏网站标题页脚信息页面最大宽度容器全局背景色这些东西如果每个页面都重复写一遍会很容易重复代码很多后面改动麻烦页面结构不统一所以更稳的方式通常是把公共外壳放在布局层让页面只关心自己的主要内容。这正是layout.tsx非常重要的原因。四、先从一个最简单的网站结构想起现在先不要急着看框架语法。先回到一个更直观的问题如果你要做一个简单的个人博客网站最常见会有哪些页面通常至少会有首页文章列表页文章详情页关于页这四类页面非常有代表性。1. 首页在做什么首页通常负责告诉用户这个网站是什么展示重点内容入口给出导航路径2. 列表页在做什么列表页通常负责把一批内容按一定方式组织起来让用户可以继续点击进入详情3. 详情页在做什么详情页通常负责展示某一条具体内容。例如一篇文章、一个商品、一个项目介绍。4. 关于页在做什么关于页通常负责介绍作者介绍项目展示联系方式或背景信息这一节很重要。因为你会慢慢发现路由设计不是先看技术而是先看内容结构和用户路径。五、在 Next.js 里页面文件和 URL 地址是什么关系这是本章最关键的基础之一。在 Next.js 的app/路由体系里你可以先建立这样一种直觉目录结构会直接影响页面地址结构。先看一个最简单的示意app/ ├── page.tsx ├── about/ │ └── page.tsx └── posts/ └── page.tsx它大致可以这样理解app/page.tsx对应/app/about/page.tsx对应/aboutapp/posts/page.tsx对应/posts1. 为什么这种方式对初学者很友好因为它的组织方式很直观。你不需要先额外写很多路由配置就能先建立一种很自然的对应关系文件夹像页面路径page.tsx像这个路径真正显示的页面内容。2. 现在需要把所有路由规则都背下来吗不需要。当前阶段先把最基础的一个目录一个page.tsx一个对应页面地址理解清楚就够了。六、app/page.tsx是什么在当前阶段你可以先把它理解成网站首页对应的页面入口文件。例如export default function HomePage() { return ( main h1欢迎来到我的个人博客/h1 p这里会分享前端学习笔记和项目记录。/p /main ); }1. 为什么这里仍然是 React 组件因为 Next.js 仍然是基于 React 的。所以页面本质上依然是组件。这也正好再次说明你前面学的 React 并没有离开现在只是换到了一个更完整的项目组织环境里。2. 首页应该优先解决什么初学阶段首页更应该先解决信息清楚导航明确结构完整而不是一开始就追求花哨视觉。七、app/about/page.tsx这类文件又在做什么它们本质上是在定义某个具体页面路径对应的页面内容。例如export default function AboutPage() { return ( main h1关于我/h1 p我是一个正在系统学习前端开发的学习者。/p /main ); }这个文件放在app/about/page.tsx那么它对应的页面地址通常就会是/about1. 这一节最值得你建立什么感觉就是页面路径不是凭空来的而是和目录结构密切相关。这会让你后面设计多页面项目时脑子里更容易建立结构感。八、layout.tsx到底在负责什么现在来看本章的另一个核心角色layout.tsx在当前阶段你可以先把它理解成包在多个页面外层的一层公共结构。例如很多网站都会有这些共用部分顶部页头导航栏页面主容器页脚这些东西不适合每个页面都重复写一遍。所以我们更希望页面只写自己的主要内容公共外壳交给布局去负责。九、先看一个最基础的layout.tsx长什么样export default function RootLayout({ children }: Readonly{ children: React.ReactNode; }) { return ( html langzh-CN body header h1从零开始学前端博客/h1 /header main{children}/main footer pCopyright 2026/p /footer /body /html ); }1.children是什么你可以先把它理解成当前布局包裹的页面内容。也就是说页头和页脚是公共部分中间变化的页面内容由children放进来2. 为什么这个思路特别重要因为它能帮你真正建立页面内容和公共外壳分层组织这件事的认知。十、为什么导航通常适合放在布局层这是一个非常常见、也非常值得一开始就建立的判断。很多网站里的导航会出现在首页列表页详情页关于页也就是说它不是某个单独页面自己的内容而是整个网站很多页面共享的结构。所以更稳的做法通常是把导航放在布局层而不是每个页面单独重复写。1. 这样做有什么好处所有页面结构更统一修改导航更方便不容易漏改2. 当前阶段最值得先建立什么意识你可以先记住一句话凡是很多页面都会重复出现的结构都值得先想想是不是应该进布局。十一、先给页面加一个基础导航在 Next.js 里页面之间常常会通过Link来跳转。当前阶段先看一个最基础的写法import Link from next/link; export function SiteHeader() { return ( header classNamesite-header h1从零开始学前端博客/h1 nav Link href/首页/Link Link href/posts文章/Link Link href/about关于/Link /nav /header ); }1. 为什么这里不用普通的a当前阶段你可以先这样理解Link是 Next.js 提供的页面跳转组件更适合在应用内部页面之间导航。后面你会慢慢理解它在体验和路由上的价值。2. 现在最重要的不是记住 API 细节而是先建立这种页面结构意识一个网站应该有明确的页面入口和清楚的导航路径。十二、如果把导航直接写在每个页面里会有什么问题先假设你这样做首页写一份导航文章页再写一份导航关于页再写一份导航短期看好像也能跑。但后面一旦导航要改比如新增一个“项目”入口修改导航顺序给导航统一加样式你就得每个页面都改一遍。这时你会明显感觉到不是功能做不到而是结构不够稳。这也正是布局层存在的重要原因。十三、一个更像样的 Next.js 页面骨架应该怎么组织当前阶段你可以先用一个非常基础的网站骨架来建立感觉。例如app/ ├── layout.tsx ├── page.tsx ├── about/ │ └── page.tsx └── posts/ ├── page.tsx └── [slug]/ └── page.tsx你现在先不用追着[slug]的细节跑。先感受整体结构就够了layout.tsx负责公共外壳page.tsx负责首页about/page.tsx负责关于页posts/page.tsx负责文章列表页posts/[slug]/page.tsx负责某篇文章详情页1. 为什么这个结构特别适合作为入门样例因为它正好对应很多内容网站最常见的四类页面首页列表页详情页关于页2. 为什么这里先不深挖动态路由因为当前阶段本章重点是路由结构感和基础布局感动态路由我们后面会在更具体的数据与页面场景里继续理解。十四、posts/[slug]/page.tsx可以先怎么理解虽然这一章不深入动态路由但你已经会在目录里看到它所以值得先有一个不紧张的认识。你可以先把posts/[slug]/page.tsx理解成用来表示“很多不同详情页都共享同一种页面结构”。例如/posts/react-introduction/posts/nextjs-basics/posts/css-layout它们页面结构很像只是内容不同。1. 为什么详情页通常很适合这种组织方式因为详情页经常是同一套结构承载不同数据。2. 现在需要马上掌握细节吗不需要。你先知道列表页和详情页通常会在路由结构上形成一组很自然的对应关系。就已经足够了。十五、页面结构先于视觉细节为什么这句话这么重要这一章的大纲里有一句很关键的话页面结构先于视觉细节。这句话特别适合在这里记住。因为初学者一开始最容易被这些问题吸走注意力颜色好不好看卡片圆角多大阴影要不要加字体是不是够精致这些都重要但在多页面项目刚开始时更该先想的是有哪些页面页面之间怎么跳哪些结构共用主内容放哪里如果这些没想清楚后面视觉再好看结构也会乱。十六、为什么布局不只是“长得像模板”有些人第一次理解布局时会把它想成一块固定不变的页面模板这只说对了一部分。更准确地说布局是在做为多个页面提供稳定外壳和统一组织方式。它不只是为了“复用一点代码”还为了保持页面结构一致让导航和共用区域稳定存在让页面职责更清楚也就是说布局是一种结构组织能力而不仅仅是复制粘贴优化。十七、当前导航高亮应该先怎么理解这是很多网站都会有的小功能。比如你在首页时“首页”高亮文章列表页时“文章”高亮关于页时“关于”高亮这能帮助用户知道我现在正处在哪个页面区域。1. 当前阶段先理解到什么程度就够了先理解它的目标就够了根据当前路径判断哪个导航项应该显示为激活状态。2. 为什么它值得一开始就提一下因为这会帮助你从一开始就建立一种“页面不是孤立的”感觉。导航、路径、页面位置感本来就是多页面项目体验的一部分。十八、一个基础导航高亮的思路示意当前阶段你不必死磕具体 API先理解思路就够了。例如你可以先这样想const navItems [ { label: 首页, href: / }, { label: 文章, href: /posts }, { label: 关于, href: /about } ];然后根据当前路径决定某一项是不是激活状态。当前阶段最值得你记住的不是具体写法而是导航高亮本质上是“当前路径”和“导航配置”之间的一次匹配。这和你前面学过的数据驱动思路其实是相通的。十九、先看一个适合初学者的整体页面组织示例下面这个结构比较适合作为当前阶段的第一版项目骨架src/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ ├── about/ │ │ └── page.tsx │ └── posts/ │ ├── page.tsx │ └── [slug]/ │ └── page.tsx ├── components/ │ ├── site-header.tsx │ └── site-footer.tsx └── styles/ └── globals.css1. 为什么这个结构比较稳因为它已经开始做了最基础的分层页面放在app/公共组件放在components/全局样式放在styles/2. 当前阶段需要一开始就拆得很细吗不需要。先把页面布局公共导航样式这几层分开就已经很不错了。二十、这一章最容易踩的几个坑这一节建议你认真看。因为刚开始做多页面结构时很多问题不是功能不会写而是结构判断不稳。1. 坑一把所有内容都塞进首页如果一个网站明明应该有多个页面却全都塞在一个页面里后面会很难维护。2. 坑二每个页面都重复写页头和页脚这样一旦结构变动会有很多重复修改。3. 坑三先追视觉细节不先想清页面结构这会导致项目外观看起来在推进实际上骨架很乱。4. 坑四把布局当成“任何东西都往里塞”的大容器布局更适合放共享外壳导航页脚主体容器而不是把每个页面自己的业务内容也都混进去。5. 坑五一看到动态路由就开始焦虑当前阶段先建立静态页面结构 页面与路径对应关系就已经足够了。6. 坑六没有导航意识用户不仅需要内容还需要清楚地知道自己能去哪里、当前在哪儿。二十一、本章实践练习这一章的练习重点是把“页面路径、页面结构、基础布局”真正联系起来。1. 练习 1创建首页、关于页和文章页请你尝试在app/下创建page.tsxabout/page.tsxposts/page.tsx然后运行项目观察这些页面和地址的对应关系。这个练习会帮助你真正建立目录结构和页面路径之间的直觉联系。2. 练习 2给网站加上统一页头和页脚请你尝试把网站标题导航区域页脚信息放到layout.tsx里。这个练习会帮助你真正理解什么叫公共外壳什么叫页面自身内容。3. 练习 3用Link把页面真正连起来请你给导航补上首页文章关于三个入口并测试跳转。这个练习会帮助你建立多页面项目最基础的“可走通”状态。4. 练习 4手动画一个网站结构草图请你在纸上或文档里画出网站有哪些页面页面之间怎么跳转哪些内容属于共享布局哪些内容属于页面自己的主体内容这个练习非常重要。因为它会帮助你把“技术文件结构”和“网站信息结构”真正连起来。二十二、学习重点提示这一章请你重点记住下面这些话路由本质上是 URL 地址和页面内容之间的对应关系。多页面网站一开始就应该建立页面结构意识而不是把所有内容都塞在一个页面里。在 Next.js 的app/路由体系里目录结构和页面地址有很强的对应关系。page.tsx更像页面入口layout.tsx更像多个页面共享的公共外壳。导航、页头、页脚这类共用结构通常更适合放在布局层。页面结构应该先于视觉细节。当前导航高亮本质上是当前路径和导航配置之间的匹配。初学阶段先把首页、列表页、详情页、关于页的结构感建立起来比一开始追复杂特性更重要。如果你只记一句话请记住这一章真正要建立的不只是“会建几个页面文件”而是“会围绕路径、页面和公共布局去组织一个网站的基础骨架”。二十三、本章小结这一章我们正式从“理解为什么学习 Next.js”推进到了“开始搭建 Next.js 多页面结构”的阶段。你已经理解了什么是路由什么是基础布局为什么学 Next.js 一开始就要先学路由和布局app/目录、page.tsx和layout.tsx的基础作用首页、列表页、详情页、关于页这类常见页面的角色为什么导航、页头、页脚通常适合放在布局层为什么页面结构要先于视觉细节更重要的是你开始真正建立一种很关键的网站级认知一个多页面项目不是“很多页面随便堆起来”而是路径、页面和布局之间有清楚对应关系的整体结构。这一步非常关键。因为从这里开始你已经不只是在写一个页面而是在真正开始搭一个结构清楚、可继续扩展的 Next.js 网站骨架。二十四、课后思考题请你认真思考下面这些问题为什么说路由本质上是地址和页面内容之间的对应关系为什么多页面项目一开始就要先建立页面结构意识page.tsx和layout.tsx在职责上有什么不同为什么导航、页头、页脚通常更适合放在布局层为什么“页面结构先于视觉细节”在多页面项目里特别重要如果你要做一个个人博客首页、文章列表页、详情页和关于页应该分别承担什么任务为什么导航高亮也属于多页面项目体验的一部分建议你把这些问题用自己的话写下来。只要你能把这些问题讲清楚说明你已经真正跨进 Next.js 多页面项目结构的主线了。二十五、下一篇预告下一章我们会继续进入从零开始学前端 | 第三十九章数据获取与页面渲染基础你会开始真正接触这些内容页面数据从哪里来静态内容、动态内容和用户交互内容有什么区别为什么页面不仅要展示数据还要处理加载态、错误态和空状态Next.js 项目里数据和页面结构怎么继续配合也就是说下一章开始我们会从“页面路由与基础布局”继续走到Next.js 页面数据组织与渲染认知的下一步。