The Complete Developer Master the Full Stack with TypeScript, React, Next.js, MongoDB, and Docker(5)
·
前端技术更新很快，直接按照书中的例子很多都跑不通了。基于作者的思路，我把代码改调整了一下以适应当下的技术。
1. 启动next.js
2.设置路由
书中用的是Pages Router。Next.js 13.4+之后默认使用App Router。
Pages Router 结构：
project/ ├── pages/ │ ├── hello.tsx │ ├── api/ │ │ └── names.js │ └── ...
App Router 结构：
project/ ├── app/ │ ├── hello/ │ │ └── page.tsx │ ├── api/ │ │ └── names/ │ │ └── route.js │ └── ...
核心特性对比
| 特性 | Pages Router | App Router |
|---|---|---|
| 数据获取 | getServerSideProps, getStaticProps |
async 组件，服务端组件默认 |
| 布局系统 | _app.js, _document.js |
layout.js（嵌套布局） |
| 加载状态 | 需要手动实现 | loading.js 自动处理 |
| 错误处理 | _error.js |
error.js（作用域化） |
| 文件约定 | 根据文件名路由 | 根据特殊文件名（page.js, layout.js等） |
| 服务器组件 | 不支持 | 默认支持，减少客户端 JS |
| 流式渲染 | 不支持 | 支持，提升性能 |
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)